Показать диалог jquery после того, как гиперссылка была нажата

Question

Я бы хотел показать диалог после того, как пользователь нажал на гиперссылку. Если пользователь нажимает продолжить в диалоговом окне, браузер должен перейти к гиперссылке. Если пользователь нажимает кнопку отмены, нажатие на гиперссылку должно быть отменено.

Ссылка должна иметь реальный URL в атрибуте href, якорь не должен использоваться.

Как это сделать с помощью Jquery?

Answer 1

Используйте обработчик .click() и .preventDefault в jQuery. e.g.:

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

Answer 2

Я бы пошел с чем-то вроде этого:

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

И, используя ненавязчивый javascript (используя jQuery):

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

    return false;
});

Вы удаляете ссылку через javascript, и только если пользователь нажимает кнопку «ОК» в диалоговом окне, местоположение окна изменяется.

Answer 3

Вы можете использовать плагин JQuery JQDIALOG, найденный здесь 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;
  });
});