Show jquery dialog after clicking hyperlink

Question

I would like to show the dialog after the user clicked on the hyperlink. If the user clicks continue in the dialog box, the browser should go to the hyperlink. If the user clicks cancel, the click on the hyperlink must be canceled.

The link must have a real url in the href attribute, the anchor should not be used.

How to do it using jQuery?

Answer 1

Use the .click() and .preventDefault in jQuery. eg:.

 $('a').click(function(event) { var answer= confirm('Do you really want to go there?'); if(!answer){ event.preventDefault(); } }); 

Answer 2

I would say something like this:

 <a href="mylink.html" id="dialogLink">Link</a> 

And using unobtrusive javascript (using jQuery):

 var link = $('#dialogLink'); link.click(function() { $(this).dialog({ buttons: { "Ok": function() { $(this).dialog('close'); window.location.href = link.attr('href'); } } }); return false; }); 

You delete the link through javascript, and only if the user clicks the "OK" button in the dialog box does the window location change.

Answer 3

You can use the jquery JQDIALOG plugin found here http://plugins.jquery.com/project/jqDialog

 <a href="foo.com" id="bar">bar</a> $(document).ready(function(){ $("a#bar").click(function(){ href = $("a#bar").attr("href") jqDialog.confirm("Are you sure want to click either of these buttons?", function() { window.location=href; }, // callback function for 'YES' button function() { return; } // callback function for 'NO' button ); return false; }); });