Simplemodal для JQuery: закрыть видимый в данный момент модальный и показать другой - PullRequest
Новая
       19

Simplemodal для JQuery: закрыть видимый в данный момент модальный и показать другой

1 голос
/ 19 ноября 2010

Я понимаю, что этот вопрос задавался несколько раз в нескольких различных формах , но я не могу заставить его работать должным образом для моей жизни.

У меня есть два DIV на моей странице, которые используются для модов, ids signup-popup и login-popup. Каждая из них имеет свои собственные кнопки закрытия с классом simplemodal-close и показывает / закрывает каждую из них по своему усмотрению.

Я хочу добавить кнопку в модал регистрации, которая закрывает ее и открывает модал входа в систему. Я следовал инструкциям, которые дал Эрик в первой ссылке выше, которую я включил ниже: 

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

Однако это не работает; модальное окно регистрации закрывается, а модальное имя входа - нет. Вот мой код (с использованием noConflict, следовательно, использование jQuery () вместо $ ()): 

jQuery(function (jQuery) {
    jQuery('#btn-signup-open').click(function () {
        jQuery('#signup-popup').modal({onShow: function (dialog) {
            jQuery('#login-from-signup').click(function () {
                jQuery.modal.close();
                jQuery('#login-popup').modal();
            })
        }});
        return false;
    });
});

И я также попробовал следующее вместо этого, полагая, что это было проще и понятнее, однако результат был тем же (модал регистрации закрывается, модал входа не закрывается, обычная кнопка закрытия и отправка формы работает нормально): 

jQuery(function (jQuery) {
    jQuery('#login-from-signup').click(function () {
        jQuery.modal.close();
        jQuery('#login-popup').modal();
        return false;
    });
});

Я попробовал другое предложение Эрика, которое состояло в том, чтобы просто заменить содержание мода. Это работает, но кажется хак-у, потому что мне приходится вручную связывать кнопку закрытия (не так уж и сложно), а модальное окно не изменяет размеры автоматически при уменьшении формы входа. Хотя это работает, похоже, что должен быть лучший способ сделать это (в частности, код, который у меня есть выше, или некоторые незначительные изменения). 

jQuery(function (jQuery) {
    jQuery('#login-from-signup').click(function () {
        jQuery('.simplemodal-wrap').html('<div class="popup simplemodal-data" id="login-popup" style="display: block;">'+jQuery("#login-popup").html()+'</div>');
        jQuery('.simplemodal-close').click(function() {jQuery.modal.close(); return false;});
          return false;
    });
});

Ответы [ 2 ]

3 голосов
/ 30 ноября 2010

Спасибо Андрею за ответ в другом посте!

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

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

Вот мой рабочий код: 

jQuery(function (jQuery) {
  jQuery('#login-from-signup').click(function () {
    jQuery.modal.close();
    window.setTimeout(function() {jQuery('#login-popup').modal()}, 250);
    return false;
  });
});
2 голосов
/ 02 декабря 2010

Это определенно способ ее решения, однако это означает, что ваш код теперь тоже асинхронный.Я думаю, это жаль, потому что как только вы начнете работать асинхронно, вы не сможете вернуться к синхронности, и любой код, использующий вашу функцию, должен будет также начать использовать setTimeout().Это может не всегда иметь значение, но я думаю, что это затрудняет модульное тестирование кодовой базы.

Это поведение на самом деле является новым с версией 1.4.1 simplemodal.Если вы переключитесь обратно на 1.3.5 , закрытие и открытие может быть выполнено последовательно без каких-либо проблем.

Я поднял вопрос здесь , чтобы посмотреть, сможем ли мы найтиспособ вернуться к синхронному close().

...