Show a jquery dialog after a hyperlink has been clicked

Question

Hi,

I'd like to show a dialog after the user clicked on a hyperlink. If the user presses continue in the dialog, the browser must go to the hyperlink. If the user presses cancel, the click on the hyperlink should be canceled.

The link should have a real url in the href-attribute, the anchor shouldn't be used.

How can accomplish this using Jquery?

Answer 1

I'd go with something like this:

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

And, using unobstrusive 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 remove the link via javascript, and only if the user clicks the 'OK' button in the dialog, is the window location changed.

Answer 2

Use the .click() handler and .preventDefault in jQuery. e.g.:

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

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;
  });
});