jQuery UI模式对话框-除非单击“确定”，否则禁止操作

Question

编辑：

我想用jquery UI对话框替换以下内容：

<asp:LinkButton ID="foo" runat="server" OnClick="someMethodThatPostsBack" OnClientClick="return confirmAction()" Text="Delete" />
<script type="text/javascript">
    function confirmAction() {
        return confirm("Are you sure you want to delete this?");
    }
</script>

除非在对话框上单击"确定"，否则我不希望操作返回。它在带有confirm的常规javascript中工作得非常好。我想用jQueryUI对话框替换它，这样它看起来更漂亮一点。有可能吗？

我创建了一个对话框，当我点击链接或按钮时打开：

<a id="aboutLink" href="/Home/About">About</a>
<script type="text/javascript">
    $("#aboutLInk").click(function() { 
        $("myDialog").dialog({
            modal: true,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
        }
        });
    });
</script>

当我单击链接时，它会将我带到"关于"页面。我希望能够显示对话框，并且只转到"关于"页面，这取决于他们是否单击对话框上的"确定"按钮。如果他们点击取消，它应该不会有任何作用。我怎样才能做到这一点？

此外，如果我每次单击按钮都创建对话框，我是否也需要以某种方式销毁对话框？我该怎么做？

Answer 1

1. 你真的不能做到这一点——click处理程序会立即返回，所以你必须防止链接被跟踪，如果（并且只有当）启用了Javascript。

   （从您的取消处理程序返回false以防止链接被跟踪）

   要在单击OK时实际更改页面地址，请在回调中设置window.location。

2. 是的，当对话框完成时，您确实需要销毁它——在事件处理程序中将close替换为destroy应该可以实现这一点。

我在http://jsfiddle.net/alnitak/WWVEg/

$("#aboutLink").click(function() {
    var that = this;         // save a reference to the clicked link
    $("#myDialog").dialog({
        modal: true,
        buttons: {
            "OK": function() {
                $(this).dialog("destroy");
                window.location = that.href;
            },
            Cancel: function() {
                $(this).dialog("destroy");
            }
        }
    });
    return false;
});

FWIW，可能没有严格的必要关闭或破坏OK回调中的对话框，因为下一行无论如何都会导致页面重新加载-我希望没有它，新页面加载会更快。

Answer 2

哦，天哪，这是旧的。。。但我遇到了和你一样的问题，决定这样做：

jQuery(function () {
    var accepted = false;
    jQuery('#dialog').dialog({
        autoOpen: false,
        bgiframe: true,
        width: 450,
        modal: true,
        open: function () {
            accepted = false;
        },
        buttons: {
            "Accept": function () {
                accepted = true;
                jQuery(this).dialog("close");
            },
            Cancel: function () {
                jQuery(this).dialog("close");
            }
        },
        close: function () {
            if (accepted == false) {
                jQuery("#chkBox").prop("checked", false);
            }
        }
    });
});

基本上，我只是声明了一个布尔变量，当单击"OK"或"Accept"时它会发生变化。close函数检查该布尔值，如果设置为false，则取消选中我的复选框。如果设置为true，则不会发生任何事情。

Answer 3

是的，您可以使用jQuery UI对话框来做同样的事情。

您的ASPX按钮代码：

 <asp:TemplateField HeaderStyle-Width="100px">
                            <ItemTemplate>
                                <asp:Button ID="Button1" runat="server" OnClientClick="javascript:return deleteItem(this.name, this.alt);"
                                    CommandArgument='<%# Eval("id") %>' CommandName='<%# Eval("status") %>' Text='<%# Eval("status").ToString().Trim().Equals("y") ? "Deactive"  : "Active"   %>' />
                            </ItemTemplate>
                        </asp:TemplateField>

Javascript代码：

<script type="text/javascript">
    $(function () {
        InitializeDeleteConfirmation();
    });
    function InitializeDeleteConfirmation() {
        $('#dialog-confirm').dialog({
            autoOpen: false,
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Delete": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    }
    function confirmDelete() {
        return confirm("Are you sure you want to delete this?");
    }
    function deleteItem(uniqueID) {    
    $("#dialog-confirm").html("Are you sure you want to change the status ?");
    $("#dialog-confirm").dialog({
        title: 'Confirm',
        height: 150,
        width: 400,
        buttons: {
            "Yes": function () { __doPostBack(uniqueID, ''); 
                      $(this).dialog("close"); },
            "No": function () { $(this).dialog("close"); }
        }
    });
    $('#dialog-confirm').dialog('open');
    return false;
} 

</script>

我希望这对你有帮助。

Answer 4

看到评论后，以下是顺利工作的内容

在jQuery UI中执行

您可以使用插件jquery.conf，然后在确认事件中添加$("#btndelete").trigger("click.confirmed");

用法：

要求

• jQuery>1.8

• jquery.confirm插件

• 引导

  $("#btndelete").confirm({
     title:"Delete confirmation",
     text:"Are you sure you want to delete ???",
     confirm: function(button) {
        // Do something..
        $("#btndelete").trigger("click.confirmed");// it is to trigger
          //the same elements click event which we would trigger without a
          //confirmation dialog
        //alert("You just confirmed.");
     },
     cancel: function(button) {
        // Do something
        //alert("You aborted the operation.");
     },
    confirmButton: "Yes I am sure",
    cancelButton: "No Do not Delete"  });
  

当然，对于那些面临问题的人来说，解决方案现在是