Jquery simplemodal закрыть существующий модал и открыть новый? - PullRequest
4 голосов
/ 27 апреля 2010

Хорошо, поэтому все модалы уже имеют изображение в правом верхнем углу, чтобы закрыть их.Как я могу сделать еще один якорь, чтобы сделать то же самое?Я подумал, что могу использовать опцию «closeClass», которая по умолчанию равна «simplemodal-close», и просто добавить этот класс в привязку, но это не дало желаемого эффекта.Это то, что я должен делать?Кроме того, все модалы будут иметь ссылку «связаться с нами», которая должна закрывать собственный модальный режим и открывать модальный контакт.Как я могу ждать, пока он не закроется, чтобы открыть следующий?

Идеи?

$('a#ask').click(function(){
        $.modal.close(function(){
        });
        $('#modal-contact').modal();
    });

Ответы [ 4 ]

3 голосов
/ 27 апреля 2010

1) Если вы назначите simplemodal-close элементу, который находится в содержимом диалога, SimpleModal автоматически свяжет функцию закрытия с событием click для этого элемента.

2) Есть несколько способов сделать это: выгрузить содержимое или сначала закрыть диалог с помощью $ .modal.close (); затем открытие нового.

UPDATE

$('a#ask').click(function(){
    $('#modal-contact').modal({onShow: function (dialog) {
        // handle the close yourself.
        // Don't use the closeClass on this element
        // call $.modal.close(); when you are done
        // call a function to open a new modal
    });
    return false;
});
2 голосов
/ 24 ноября 2010

Текущее событие onClose действует как onBeforeClose, и onAfterClose для $ .modal.close () не рассчитано. Единственный обходной путь - ждать:

.

$ modal.close (); window.setTimeout (showSecondModal, 500);

1 голос
/ 05 февраля 2013

Обновление до последней версии SimpleModal, в настоящее время 1.4.4. Тайм-аут проблема была исправлена ​​в 1.4.2 в соответствии с http://www.ericmmartin.com/simplemodal-1-4-3-released/:

Удален оперный обход для close (), который вызывал проблемы

Ваш код, приведенный выше, с небольшим изменением должен затем работать как положено:

$('a#ask').click(function(){
    $.modal.close();
    $('#modal-contact').modal();
});
1 голос
/ 02 сентября 2010

Чтобы ответить на второй вопрос - как закрыть существующий модал и впоследствии открыть новый - вам нужно сделать три вещи:

  1. Добавить Persist: true к опции обратного вызова первого модального режима. Согласно веб-сайту Эрика Мартина: «Если true, данные будут поддерживаться во время модальных вызовов, если false, данные будут возвращены в его первоначальное состояние. "
  2. Добавьте обратный вызов onClose к первому модалу.
  3. Закройте первый модальный режим перед тем, как запустить функцию, чтобы открыть второй модальный режим.

Итак, когда вы закрываете модальное с помощью $. Modal.close () , onClose будет работать, вызывая анимацию и закрывая модальное. Поскольку persist имеет значение true, следующая функция будет сохранена . Ваша функция сработает, и ваш второй модал откроется.

$("#first_modal").modal({
     containerId: 'modal_id',
     persist: true,
     onClose: function (dialog) {
     dialog.container.fadeOut(100, function () {
        dialog.overlay.fadeOut(200, function(){
            $.modal.close();
            showSecondModal();      
        });
   });

} });

...