10

私のページには、JQuery Dialog Widget を使用して作成されたダイアログ ボックスがあります。ページのポストバックをトリガーし、さまざまなことを行うページ上のさまざまなボタンをクリックする機能を持つように、2 つのボタンを設定しました。ダイアログ ボックスが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

モーダルは、オーバーレイ自体とその下のすべての 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 に答える