試圖製作模式彈出式菜單

Question

我正在嘗試創建模式彈出式窗口（例如，對於是/否確認），以便在彈出窗口被回答之前代碼不會繼續執行。我知道推薦的方法是爲每個按鈕（菜單項）添加回調，但當菜單是循環的一部分時，此方法會出現問題，其中一個結果可能是循環中的「中斷」，而不是函數呼叫。 無論如何，我想出了代碼在這裏，使用一個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'仍然爲空（它將通過在打開之前附加到菜單上的按鈕上的回調來設置）。 一個附屬問題是，爲什麼我的'離開子句'有更長的超時時間？

Answer 1

你可以使用JQuery UI嗎？它附帶它自己的模態對話框。

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

Answer 2

變化

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

到

afteropen: wait 

或

afteropen: function() { wait(); } 

目前你無盡做wait和永遠不會離開循環。這也創造了無限的超時。

使用改變你正在做的一次「等待」 - 這並重新setTimeout的，直到popupResult沒有更多的不!

---

BTW：此行可能不會做，甚至干涉你的意圖。如果這是由瀏覽器在用戶選擇答案和下一個「等待」超時之間執行的 - 這會重置用戶的更改。

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); 

Answer 3

正如所提到的，你也許可以找到一個預爲您的問題提供解決方案;有噸jQuery的模態彈出式廣告和包裝盒外面的（谷歌是你的朋友。）這就是說，我至少可以看到一個問題：

$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.) 
}); 

我希望這是有道理的。