10

我的页面上有一个使用 JQuery Dialog Widget 制作的对话框。我已经设置了两个按钮，使其具有单击页面上不同按钮的功能，这些按钮将触发页面的回发并执行各种操作。当对话框为modal: false时，对话框会执行相关的clickButton函数，然而，当我设置modal: 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()
    };
4

2 回答 2

4

Modal 阻止了覆盖层本身以及其下方的任何 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 演示

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

于 2012-12-19T16:05:48.340 回答
2

尝试关闭事件：

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);
        }
});
于 2012-12-19T16:19:48.527 回答