2

ポップアップが応答されるまでコードが実行されないように、モーダル ポップアップを作成しようとしています (たとえば、はい/いいえの確認用)。推奨される方法は、各ボタン (メニュー項目) にコールバックを追加することですが、この方法では、メニューがループの一部であり、結果の 1 つが関数ではなくループからの「中断」である場合に問題が発生します。電話。とにかく、jquery 1.3ポップアップウィジェットを使用して、ここにコードを思いつきました:

var $popUp;
var popupResult;
function wait()
{
    if (popupResult == null) {
        setTimeout(wait, 100);
    }
    else
        return;
}

function CreatePopupMenu(title)
{
    popupResult = null;
    // for safety, timeout the popup if it isn't answered
    setTimeout(function(){ popupResult = false;  }, 3000);
    $popUp = $("<div/>").popup({
        dismissible: false,
        theme: "c",
        afteropen: function () {
            while (popupResult == null)
                wait();
        }
    }).on("popupafterclose", function ()
    {
        $(this).remove();
    });
    $("<h4/>", {  text: title }).appendTo($popUp);
}

問題は、ポップアップが実際には表示されず、コードが「afteropen」コールバックに直接実行されることです。ポップアップが表示されない場合、ユーザーはボタンを使用して「popupResult」を設定できないため、待機は永遠に続きます。「afteropen」コールバックを削除すると、ポップアップは期待どおりに表示されますが、「popupResult」は null のままです (メニューが開かれる前にメニューに追加されるボタンのコールバックによって設定されます)。副次的な質問は、タイムアウトが長い私の「get-out句」が起動しないのはなぜですか?

4

3 に答える 3

2

前述のように、問題に対する事前に作成された解決策をおそらく見つけることができます。たくさんの jQuery モーダル ポップアップとボックスがあります (Google はあなたの友達です)。

$popUp = $("<div/>").popup({
  dismissible: false,
  theme: "c",
  afteropen: function () {
    /* while (popupResult == null) */ // <-- REMOVE THIS LINE
    wait();
  }
})

そのwhileループは不要です。while実際、このコンテキストでループを使用することはほとんどありません。基本的に無限ループを開始しています (他のコードの実行、ブラウザーのレンダリングなどをブロックするため)。それを削除してみてください。そうすれば、コードは期待どおりに動作するはずです。(私はこれをテストしていません。)

これを行うためのより良い方法は、次のように HTML でポップアップを構造化することです (例と同様に、jQuery でこのコードを作成することもできます)。

<div class='popup' id='myPopup'>
  <h2>Popup Title</h2>
  <a href='#' class='action' data-action='close'>Close</a>
  <a href='#' class='action' data-action='other'>Press Me!</a>
</div>

次に、イベント ハンドラー (つまり、コールバック) をリンク/ボタンにアタッチします。

$('.popup a.action').on('click', function(event) {
   var action = $(this).data('action');
   // Do something... (Close popup, etc.)
});

それが理にかなっていることを願っています。

于 2013-06-19T23:53:54.640 に答える
1

変化する

afteropen: function () {
    while (popupResult == null)
        wait();
}

に

afteropen: wait

また

afteropen: function () { wait(); }

現在、あなたは際限なく行いwait、ループを離れることはありません。これにより、無制限のタイムアウトも作成されます。

一度「待機」した変更を使用すると、popupResult がなくなるまで setTimeout がリセットされます。!

ところで：この行はあなたの意図を妨げたり、妨げたりすることさえありません. ユーザーが回答を選択してから次の「待機」タイムアウトまでの間にこれがブラウザによって実行されると、ユーザーの変更がリセットされます。

setTimeout(function(){ popupResult = false;  }, 3000);

waitTimeout を保存する方が良いwait

var waitTimeout;

function wait() {
    if (!popupResult) {
        waitTimeout = setTimeout(wait, 100);
    }
}

clearTimeoutしたがって、ポップアップを自動的に閉じることができます：

setTimeout(function () {
    if (waitTimeout) {
        clearTimeout(waitTimeout);
        waitTimeout = undefined;
    }
    popupResult = undefined;
    $popUp.close();
}, 3000);
于 2013-06-19T23:48:34.340 に答える
0

JQuery UI を使用できますか? 独自のモーダル ダイアログが付属しています。

http://jqueryui.com/dialog/#modal

于 2013-06-19T23:34:55.167 に答える