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>

除非在对话框上单击“确定”，否则我不希望操作回发。它在常规javascript中完美地运行并确认。我想用jQuery UI对话框替换它，所以它看起来更漂亮。有可能吗？

我创建了一个单击链接或按钮时打开的对话框：

<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

您无法真正做到这一点 - click处理程序立即返回，因此您必须阻止链接被自己跟踪，如果（且仅当）启用了Javascript。

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

要在点击OK时实际更改网页地址，请在回调中设置window.location。
是的，你需要在对话结束时销毁对话框 - 在事件处理程序中用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);
            }
        }
    });
});

基本上我刚刚声明了一个布尔变量，当单击“确定”或“接受”时它会发生变化。 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.confirm，然后在确认事件中添加$("#btndelete").trigger("click.confirmed");

用法：

<强>要求

jQuery＆gt; 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"  });

当然，对于那些现在面临

的问题的解决方案

jQuery UI模式对话框 - 防止操作除非单击确定

4 个答案:

用法：