twitter bootstrap modal speedbump
HTML
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<div class="container">
<p>1. External link should initiate speedbump <a href="http://google.com">http://google.com</a>.<br/>
<span class="muted">(This is initializing modal but continue button is closing modal instead of sending to URL)</span></p>
<p>This does not initiate speedbump due to exception <a href="mailto:">Email Us</a><br/>
<span class="muted">(This is working as intended)</span></p>
<p>What is the best way to add a whitelist to allow specific external URL's to pass without speed bump? For example, let these links through without speed bump</p>
<ul>
<li><a href="http://stackoverflow.com">http://stackoverflow.com</a></li>
<li><a href="http://yahoo.com">http://yahoo.com</a></li>
</ul>
<p>Why does "http" initiate modal but using "www" prefix in URL does not initialize modal and appends URL to domain?<br/>
<span class="muted">(For example: clicking the www.yahoo.com link below will generate a 404 because it's sending to jsfiddle.net/yahoo.com)</span></p>
<p><a href="www.yahoo.com">www.yahoo.com</a></p>
<div class="well muted">jQuery 1.9.1, bootstrap.min.js 2.3.0, bootstrap css http://twitter.github.com/bootstrap/assets/css/bootstrap*css</div>
</div>
<div id="speedbump" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3>Important Notice</h3>
</div>
<div class="modal-body">
<p class="strong">You're leaving this website</p>
<p>When you click continue you will connect to another website which we do not own or operate.</p>
</div>
<div class="modal-footer"><a id="url_link" class="btn btn-primary">Continue</a> <a class="btn" href="#" data-dismiss="modal">Cancel</a></div>
</div>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
.container {margin-top: 10px;}
JavaScript
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);
});
});
});