Question

我的页面上有一个使用JQuery Dialog Widget制作的对话框。我已经设置了两个按钮，它们具有点击页面上不同按钮的功能，这些按钮将触发页面的回发并执行各种操作。当对话框为 modal：false 时，对话框将执行相关的 clickButton 功能，但是，当我设置模态：true 时，虽然输入了该功能，但不会点击按钮。

我想我错过了关于执行与按钮相关的功能的 modal：true 的内容。

以下是我的javasript

    function displayQuoteToCashMessage() {
        //this is where we do that alert for the QuoteToCash request stuff
        $("#<%=divQuoteToCashAlert.ClientId %>").show();
        $("#<%=divQuoteToCashAlert.ClientId %>").dialog({
            modal: false,
            resizable: false,
            buttons: {
                "Ok": function () {
                    //save confirmations
                    clickButton(true);
                    $(this).dialog("close");
                },
                "No": function() {
                    clickButton(false);
                    $(this).dialog("close");
                }
            }
        });        
    }

    function clickButton(b) {
        //do something with b
        document.getElementById(btnSave).click()
    };

Answer 1

模态会阻止覆盖本身上的所有类型的事件和操作，以及它下面的任何DOM 事件。但是常规函数调用，例如你的clickButton() 正常，如果你在该函数的开头发出警告，你会看到它到达那里。

您遇到的问题是，您正在尝试与click与模式下面的DOM元素进行交互（这是被拒绝的内容）

// It gets here without a problem function clickButton(b) { // But this event here is what *modal* is preventing. document.getElementById(btnSave).click(); }

我一直在做的是关闭对话框首先，然后执行任何外部脚本（特别是如果我知道他们试图触发dom事件）。通过这样做，你将没有问题。

<强> jsFiddle DEMO

buttons: { "Ok": function () { $(this).dialog('close'); // now wait a 100 ms for it to fully close // this is mainly for the slow browsers, "just in case" really setTimeout(function () { clickButton(); // now we call your function (knowing the modal is gone) }, 100); } }

这种微小的延迟只会变得不明显，并会让你在保持modal:true
的同时运行你的功能

Answer 2

尝试close事件：

var okButtonWasClicked = false;
$( "#<%=divQuoteToCashAlert.ClientId %>" ).dialog({ 
    buttons: {
        "Ok": function () {
            okButtonWasClicked = true;
            $(this).dialog("close");
        },
        "No": function() {
            okButtonWasClicked = false;
            $(this).dialog("close");
        }
    },
    close: function() {
        if(okButtonWasClicked) {
           clickButton(true);
        } else {
            clickButton(false);
        }
});

在回答JQuery对话框时Javascript没有执行

2 个答案: