Question

我有一个填充了数据库中数据的表，其中每一行都有一个内部有一个锚元素的单元格。这个锚将导致同一页面，但是有一个查询字符串告诉php哪一行包含它应该删除的数据。

我需要在用户点击锚点时打开一个jQuery对话框，要求他在加载网址之前确认他的意图。 “取消”按钮应关闭对话框，不执行任何操作。然后，“确定”按钮应该打开网址。

非常感谢任何帮助。

//使用'我尝试过的'编辑。这是我第一次搞乱jQuery，学习的时间已经不多了...... =（

jQuery(document).ready(function(){
var $dialog = jQuery('<div class='msg_dialog'></div>')
    .html('Are you sure you want to do this?')
    .dialog({
        autoOpen: false,
        title: 'Confirm action',
        buttons: [{
            text: "Cancel",
            click: function(){
                jQuery(this).dialog("close");
            }
        }] // didn't even try the OK button since I couldn't even get the dialog opened
    });

jQuery('#confirm_del').click(function(){
    $dialog.dialog('open');
    return false;
});
});

Answer 1

$("a").on("click", function(e) {
    var link = this;

    e.preventDefault();

    $("<div>Are you sure you want to continue?</div>").dialog({
        buttons: {
            "Ok": function() {
                window.location = link.href;
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
});

示例： http://jsfiddle.net/uRGJD/

（重定向到Google无法在JSFiddle上运行，但应该在普通页面上运行）

Answer 2

如何使用：

<a href="<?php echo 'your_url'.'?query_string='.$query_string ?>" onclick="return confirm('Are your sure?')">
     Go
</a>

Answer 3

您可以创建一个为您创建按钮的对话框，但我喜欢您自己创建按钮的方法，以便您可以使用真实链接而不是使用javascript进行导航。

工作演示： http://jsfiddle.net/gilly3/sdzbB/

<div id="dialog-confirm">
    <div class="message">Are you sure?</div>
    <div class="buttons">
        <a class="cancel" href="#">Cancel</a>
        <a class="ok" href="#">Ok</a>
    </div>
</div>

$("#dialog-confirm").dialog({ autoOpen: false }).find("a.cancel").click(function(e){
    e.preventDefault();
    $("#dialog-confirm").dialog("close");
});
$("a[href]:not(#dialog-confirm a)").click(function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .dialog("option", "title", $(this).text())
        .dialog("open")
        .find("a.ok").attr({
            href: this.href,
            target: this.target
        });
});

使用真实链接而不是location.href = link的好处是，您可以获得各种内置的好东西，例如在新标签中打开链接的鼠标快捷方式，将链接拖动到书签的功能栏或桌面，能够将链接复制到剪贴板，通过选项卡键盘访问等

Answer 4

您应该防止链接的默认行为，就像这段代码一样。

$('.tableId tr td a').click(function(event){
    //code to display confirmation dialog  
    event.preventDefault();

  }

您可以使用此JQuery插件进行确认对话。http://jqueryui.com/demos/dialog/#modal-confirmation

打开链接之前jQuery对话框确认

4 个答案: