JavaScript or jQuery "Are you sure?" dialog for <A> link?

Question

I have a link in my HTML:

<a href="/DoSomethingDangerous">do something dangerous</a> 

Visiting the DoSomethingDangerous link causes a not easily reversable action to occur.

So after the link is clicked on I would like a dialog box (eg "Are you sure?" "OK" "Cancel") to be displayed and if the user clicks Cancel the link is not visited and the browser remains at the same page.

What is the cleanest technique using either Javascript or jQuery to implement this?

Answer 1

<a class="confirm" href="/DoSomethingDangerous">do something dangerous</a> 

JQuery:

$(function() {     $('.confirm').click(function(e) {         e.preventDefault();         if (window.confirm("Are you sure?")) {             location.href = this.href;         }     }); }); 

or even simpler:

$(function() {     $('.confirm').click(function() {         return window.confirm("Are you sure?");     }); }); 

The native confirm box can't be styled. If you want style, then you could use jQuery.UI.dialog