jQuery Модал, который может быть поставлен в очередь - PullRequest
Новая
       16

jQuery Модал, который может быть поставлен в очередь

2 голосов
/ 04 сентября 2011

В настоящее время у меня есть простое приложение, которое Ajax подключает к серверу, получает JSON и затем что-то делает с ним. Я хотел бы добавить сообщения, чтобы показать загружаемые изображения и другую информацию, но в данный момент я борюсь с simplemodal, потому что он не ставит модальные очереди, поэтому он просто запускает все, как только приходит. Я пытался написание очереди для нее, не получилось так хорошо:)

Приложение должно:

  • Отправить запрос ajax (показать модал, не нажимать на что-либо)
  • Ajax complete (скрыть модальный режим, разрешить щелчок)
  • Если [например] возвращаемый объект JSON имеет установленное «сообщение» (if (strJson.message)) { }), показать сообщение как модальное
  • Разрешить пользователю закрывать модальные

Пока они читали сообщение, если другой ajax-вызов пришел и ушел, и у нас есть еще несколько модальностей, они должны быть в очереди, чтобы показать, когда текущий закрывается.

Это похоже на то, что должно быть там, но я не вижу ничего, что упоминало бы это конкретно.

Есть идеи? :)

1 Ответ

4 голосов
/ 04 сентября 2011

Вы можете взять сообщения и поместить их в массив, затем, когда диалоговое окно закрыто, вы можете проверить, есть ли еще сообщения, есть ли извлечение следующего сообщения из массива и отобразить его.Вот пример использования jQuery UI Dialog .

HTML 

<div id="dialog"></div>

JavaScript 

var messages = [],
    addMessage = function (msg) {
        messages.push(msg);
        if (!$('#dialog').dialog("isOpen")) {
            displayMessage();
        }
    },
    displayMessage = function () {
        $('#dialog').html(messages.shift()).dialog('open');   
    };
$(function () {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        close: function () {
            if (messages.length > 0) {
                displayMessage();
            }   
        }
    });
    addMessage('First Message');
    addMessage('Second Message');
});
...