I recently added a unique class to certain links on my website.
When these specific links are clicked, I want them to trigger a customized dialog box.
My goal is to modify the CSS of this special dialog box.
Only links with this particular class should be able to activate the custom dialog box.
I hope this explanation is clear. Thank you for your help!
Here is my progress so far:
http://jsfiddle.net/erlenmasson/qP8DY/2576/
HTML
<a href="https://twitter.com/ErlenMasson" target="_blank"> External link </a>
Javascript
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).addClass("external-link");
var elems = document.getElementsByClassName('external-link');
var confirmIt = function (e) {
if (!confirm('Leaving so soon?')) e.preventDefault();
};
for (var i = 0, l = elems.length; i < l; i++) {
elems[i].addEventListener('click', confirmIt, false);
}
CSS
.custom-dialog {
}