CODEWITHSUNDEEP
jquerydialoghref
murze
murze

Reputation: 4103

Show a jquery dialog after a hyperlink has been clicked

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?

Upvotes: 4

Views: 5267

Answers (3)

dagray
dagray

Reputation: 933

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

Upvotes: 0

dnagirl
dnagirl

Reputation: 20446

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

Upvotes: 2

Tejs
Tejs

Reputation: 41256

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.

Upvotes: 1

Related Questions