New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Implementing "Speedbumps" in DNN

Implementing Speedbumps in DNN


Have you ever been asked to implement a “speedbump” on a client website and been like WHAAA???  LOL!  The first time I heard this phrase, I had no clue what the heck is our client was talking about and worse yet, I was too ashamed to just come out and ask them at first!  :)  After doing some searching around, thanks to our friend Google, I got some ideas as to what they might have been asking, so I mustered up the courage to just fall on my sword and let them know we were clueless to the full meaning of their "speedbump" request.  Perhaps you have found yourself in the same boat and landed on this blog post.



Most of us are familiar with speedbumps on the streets, but what exactly is a “speedbump” in the context of a website?  In simple terms, a “speedbump” refers to a forced user confirmation upon clicking a hyperlink that goes to an external website.  If the user clicks "OK" (or equivalent), they are forwarded to the external website.  If they click "CANCEL", they will remain on the same page and not be forwarded.


Use Case

For example, a "speedbump" on a bank's website would include specific legalese and would ask for user acknowledgement prior to allowing the user to leave their website via the clicked hyperlink.  This helps to make it clear to the user that they are about to leave the website and any information on the external website is not provided by the bank.  Other use cases may include promotional messaging on e-commerce sites, like:


"Hey, did you forget something?  You still have some items in your shopping cart.  Checkout now to receive a courtesy 5% off your purchase!"


"Speedbumps" are often implemented on external hyperlinks as well as email links.  The latter usually requires slightly different handling.  We'll get into that below when we cover the custom scripting.



Now that we know what a “speedbump” is, let’s talk through implementation details for a DNN (DotNetNuke) website.  There are many ways to implement this type of feature, but I’ll cover one of the more flexible approaches.  This will involve two areas:


  • HTML
  • Script
  • Custom CSS Class



We need to place a small amount of HTML, that will be accessible on every page of the site, for the modal window that will be displayed when a user clicks a hyperlink to an external website or email.  This can be placed in the theme/skin directly or you can use an open-source module like Content Injection Module by Will Strohl.


<!-- External Link Disclaimer -->

<div class="popup extLink">

<p>You are about to leave the official website for <INSERT COMPANY NAME>. Click Continue to proceed or click the "x" above to close this and remain on our website.</p>

<p class="text-center"><a href="#" class="ok button-primary" target="_blank">Continue</a></p>



<!-- Email Disclaimer -->

<div class="popup emailLink">

<p>Notice: Because there is a risk that information transmitted via Internet email could fall into the wrong hands, <INSERT COMPANY NAME> suggests that confidential information, such as account numbers or social security numbers, not be transmitted via email. Instead, please contact <INSERT COMPANY NAME> directly.</p>

<p class="text-center"><a href="#" class="ok button-primary">I Understand</a></p>





Now we need to implement a short jQuery script that will be accessible on every page of the site.  This script will look for any page instance of the custom CSS class speedbump on an anchor tag and act accordingly.  This script will control the display of the HTML in the previous section.  Again, this can be placed in the theme/skin directly or you can use an open-source module like Content Injection Module by Will Strohl.


/* START Speedbump Modal Handler */

// Make Email Address Links Show Disclaimer First


jQuery(document).ready(function ($) {


autoOpen: false,

show: {duration: 250, effect: "fade"},

hide: {duration: 125, effect: "fade"},

modal: true,

resizable: false,

draggable: false,

width: "96%",

position: {

my: "center",

at: "center",

of: window,

within: window


closeOnEscape: true



$(".ui-dialog-titlebar-close").addClass(" fa fa-times");


function showDisclaimer(href, linkType){

$(".popup." + linkType).dialog("open");

$("a.ok").attr("href", href);

$("a.ok, .ui-widget-overlay").click(function(e){





var thisUrl, linkType;

$('a[href*="mailto:"], a[class*="speedbump"]').click(function(e){


thisUrl = this.href.substr(this.href);


linkType = "emailLink";

} else {

linkType = "extLink";


showDisclaimer(thisUrl, linkType);



/* END Speedbump Modal Handler */

Custom CSS Class

Now, within your site content you can apply the custom CSS class speedbump to any hyperlink.  Following is an example:


<a href="" class="speedbump" target="_blank">Search</a>


The link click will be handled by the HTML and Script above.  A modal popup will be displayed to facilitate the blocking or forwarding of the user to the external site or email.



Now you know what a "speedbump" is within the context of a website and how to implement it.  So, hopefully you will not suffer the same embarrassment as me!  :)


Joseph Craig
Nice job!

On the several sites where I've done something like this, they were either existing sites or there were some strong legal constraints that required that the speedbump be applied to EVERY link to an external site. You weren't allowed to miss one!

So, I basically did this but added jQery that examined every link on the page and applied the speedbump class to qualifying hyperlinks. Besides satisfying the requirements, it has the advantage that someone creating content doesn't even have to know about it.
Joseph Craig Wednesday, January 31, 2018 1:34 PM (link)
Will Strohl
Very cool. I could see this being a DNN module too - that takes advantage of HTTP Module functionality to make it more "secure" or consistent. For example, any JS error or turning off JS essentially disables this functionality as outlined here. It would be cool to have something in the HTTP Module pipeline that rewrites external links to point to an interstitial page on the site which allows the visitor to decide whether or not they wish to redirect and/or accept the terms/disclaimer. does something similar on their own site, rewriting all external links to have "nofollow" everywhere. Great post! :)
Will Strohl Friday, February 2, 2018 5:11 PM (link)
Michael Cunningham
I recently had to do something similar and found it to be a great use for the 2sxc module.

I created a 2sxc content type similar to yours with the fields below

Now my users can add this module to any page fill in a couple of fields and have a "Speed Bump"

An example is here:

Edit Fields
Modal Head
Modal SubHead
Modal Body
Close Button Text
Hard / Soft (Whether escaping from the modal still allows access to page)
Additional JS
Prevent Recurring Mins (This sets a cookie to avoid showing the modal again for a number of minutes)
Allow Relaunch (This allows the user to relaunch the modal (ie terms of use)
Relaunch Text

Michael Cunningham Friday, February 9, 2018 5:33 PM (link)
David Poindexter
Very nice comments and approaches everyone!
David Poindexter Friday, February 9, 2018 5:42 PM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out