A speedbump is a essentially a confirmation dialogue when a website visitor clicks a link to leave your site. Speedbumps are actually required by law in some countries for industries such as Credit Unions and banks. There are several ways to create a speedbump, and I’m going to show you just one way. You can borrow or adapt any part of these methods for your own site.
Technical Requirements
Before getting started with this technique, you will need two resources installed on your site:
Once these two frameworks are installed on your site, you may continue.
The jQuery: Making the Magic Happen
Using jQuery we are going to do the following:
- Scan the page for external links
- Exclude links to emails, phone numbers, and any links that point back to your own domain
- Apply the Bootstrap data-toggle attribute to the hyperlinks
- Apply the Bootstrap data-target attribute to the hyperlinks
- Apply a css class for styling (.ext_link)
- Add the link and title to the modal window when a link is clicked
Install the following code in a linked .js file (after jQuery).
jQuery(document).ready(function () {
// FIND EXTERNAL LINKS
$.expr[":"].external = function (a) {
// DO NOT INCLUDE THE FOLLOWING MATCHES: EMAIL LINKS, TELEPHONE LINKS, HOSTNAME
return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && a.hostname != location.hostname
};
// ADD BOOTSTRAP DATA-TOGGLE ATTRIBUTE TO THE LINKS
$('a:external').attr('data-toggle', 'modal');
// ADD BOOTSTRAP DATA-TARGET ATTRIBUTE TO THE LINKS
$('a:external').attr('data-target', '#speedbump');
// ADD EXTERNAL LINK CLASS .ext_link FOR STYLING
$("a:external").addClass("ext_link");
// ADD THE LINK AND TITLE TO THE MODAL WINDOW
$(function() {
$('a.ext_link').click(function() {
var url = $(this).attr('href');
var title = $(this).attr('title');
$('#url_link').attr('href', url);
$('h3#speedbump-title').replaceWith( '<h3 id="speedbump-title">' + title + '</h3>' );
});
});
});
The HTML: Link
<a href="http://www.google.com" title="Visit Google dot com">Google.com</a>
It is important to note that the title attribute will be inserted into the modal window h3 header. Failing to add a title will result in “Undefined” as the modal window heading.
The HTML: Bootstrap Modal Window
The following HTML can be placed just about anywhere inside the <body> of your page. Just to keep things clean, I like to add it just before the closing </body> tag.
<div id="speedbump" class="modal hide">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="speedbump-title"></h3>
</div>
<div class="modal-body">
Our website does not provide, and is not responsible for, the product, service, or overall website content on third-party websites. Its privacy polices do not apply to linked third-party websites. Visitors should consult the privacy disclosures on any particular website for further information.
</div>
<div class="modal-footer">
<a class="btn" href="#" data-dismiss="modal">Close</a>
<a id="url_link" class="btn btn-primary">Continue</a>
</div>
</div>
That’s about it. Fairly simple. Comments, questions?
9 replies on “Create a SpeedBump with jQuery & the Bootstrap Modal”
What about adding a “White list” if you want to allow certain external URL’s to pass without speedBump? Tried a new RegExp
&& !a.href.match(/http\/\/\:\subdomain\.site\.com/)with no luck.Had slashes and colon reversed. Works now but also got help with a more streamlined Regex and thought I would share.
return !/^(mailto|tel):|http:\/\/mail\.google\.com/.test(a.href) && a.hostname != location.hostname. Still wondering if there’s a different way for multiple URL’s to a white list that’s cleaner but this works for now.I’m sure there is a way to create an array of approved web sites. I haven’t really had the need to do so, though.
Thanks Tim!! I needed all external links to be bound to the same modal alert so I commented out
$('h3#speedbump-title').replaceWith( '' + title + '' );to rely on modal h3 instead of creating the same title for every HREF link.Also, definately needed 3rd party links to open in new tab/window which means I needed to destroy modal after click event to 3rd party site so when user closes 3rd party tab they do not still see modal lag on referring site.
Based on your suggestions I came up with the following modification which works great. Thanks again for your help!!!!
jQuery(document).ready(function () {
$.expr[":"].external = function (a) {
return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && a.hostname != location.hostname
};
$('a:external').attr('data-toggle', 'modal');
$('a:external').attr('data-target', '#speedbump');
$("a:external").addClass("ext_link");
$(function () {
$('a.ext_link').click(function () {
var url = $(this).attr('href');
var title = $(this).attr('title');
$('#url_link').attr('href', url);
// IF USER CONTINUES PAST SPEEDBUMP, OPEN 3RD PARTY LINK IN NEW TAB/WINDOW AND DESTROY MODAL
$('#url_link').click(function () {
$('#speedbump').modal('hide'), window.open(this.href);
return false;
});
});
});
});
Pasted bugged code. Wouldn’t want anyone to duplicate. Here is final modifications that have been tested.
jQuery(document).ready(function () {$.expr[":"].external = function (a) {
return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && a.hostname != location.hostname
};
// OPEN 3RD PARTY SITE IN NEW TAB/WINDOW
$('#url_link').click(function () {
window.open(this.href);
return false;
});
// ADD BOOTSTRAP DATA-TOGGLE ATTRIBUTE TO THE LINKS
$('a:external').attr('data-toggle', 'modal');
$('a:external').attr('data-target', '#speedbump');
$("a:external").addClass("ext_link");
$(function () {
$('a.ext_link').click(function () {
var url = $(this).attr('href');
var title = $(this).attr('title');
$('#url_link').attr('href', url);
$('#url_link').click(function () {
$('#speedbump').modal('hide')
}); // DESTROY MODAL IF USER CONTINUES
});
});
});
Thanks Tim, this worked perfectly. I do agree with disliking _blank target which I believe is deprecated in XHTML. Just using the terminology to relate action. As you suggested, we can add to continue button. Would be nice to have a destroy method though because the modal will stay open in the original tab. If you had a quick an easy method for this that would be awesome. Ether way, still a very useful and great tutorial!!!!
Try adding the attribute
data-dismiss="modal"on the continue button. That should do it.Or, you could add a simple JQuery action on the click, to close the dialogue box. Something like:
$(function() { $('a#url_link').click(function() { $('#speedbump').modal('hide') });I haven’t tested either of these methods, though.
Exact copy/paste of this tutorial script works but modal title displays as “undefined”. Clicking close button dismisses modal but clicking continue does not pass URL. Probably some simple steps missing. Can you flush comenting out a little more to denote where modal title change should be as well as additional requirement for passing URL? I’m assuming this has to do with $(‘#url_link’).attr(‘href’, ‘/bumper.php?url=’ + url); function? ALso, perhaps address _blank targeting. Since speedbumps are alerting that you are entering 3rd party site, most sites would like to launch new tab instead of ripping user away from controlled content.
Otherwise, this is the only twotter bootstrap modal speedbump tutorial on web. Much needed!!!
I have updated the page. It looks like I failed to explain how the title attribute plays into the link and modal window. I also updated the Javascript to not include a tracking page, which is most likely why it wouldn’t take you anywhere.
_blank targeting is not built into this intentionally. I dislike the use of _blank targeting. You could easily add the _blank targeting by coding it into the continue button.
Let me know how this works for you!