Попытка создания модального всплывающего меню

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? Он поставляется с собственным Modal Dialog.

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

Answer 2

Изменить

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

в

afteropen: wait 

или

afteropen: function() { wait(); } 

В настоящее время вы бесконечны делать wait и никогда не оставит петля. Это также создает неограниченные таймауты.

Используя изменения вы делаете когда «ожидание» - что это повторно SetTimeout до popupResult не больше не !

---

КСТАТИ: Эта линия может не делать и даже мешать ваши намерения. Если это выполняется браузером прямо между пользователем, который выбирает ответ и следующий тайм-аут ожидания, это приведет к сбросу пользовательских изменений.

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 модальных всплывающих окон и коробок там (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.) 
}); 

Надеюсь, это имеет смысл.