Question

我想在用户点击超链接后显示一个对话框。如果用户在对话框中按下继续，则浏览器必须转到超链接。如果用户按下取消，则应取消单击超链接。

链接在href-attribute中应该有一个真实的url，不应该使用锚。

如何使用Jquery完成此任务？

Answer 1

在jQuery中使用.click()处理程序和.preventDefault。 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

您可以使用http://plugins.jquery.com/project/jqDialog

中的jquery 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;
  });
});

单击超链接后显示jquery对话框

3 个答案: