2014-11-04 4 views
1

Использование Magnific Popup позволяет принудительно создать второе всплывающее окно, открытое в то время, когда первое еще открыто, чтобы принимать новые параметры? В documentation говорится следующее:Magnific Popup: открытие второго всплывающего окна с различными опциями

«Если всплывающее окно уже открыто - это просто overwite содержания (но старые опция будет сохранена).»

Я открываю всплывающее окно, используя открытый метод open() в некотором JavaScript. Проблема в том, что мое первое всплывающее окно является модальным, поэтому к нему не добавлена ​​кнопка закрытия. Второе всплывающее окно не должно быть модальным, но поскольку оно использует параметры первого, а не собственного, оно модально.

Вот jsFiddle с проблемой: jsfiddle

Вот пример:

Html

<div class="popup_dialog mfp-hide" id="modal_popup"> 
    <p>My modal popup</p> 
</div> 

<div class="popup_dialog mfp-hide" id="non_modal_popup"> 
    <p>My non modal popup, which should have a close button.</p> 
</div> 

CSS

.popup_dialog { 
    background: none repeat scroll 0 0 #fff; 
    border-radius: 3px; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 500px; 
    padding: 30px; 
    position: relative; 
} 

.mfp-hide { 
    display:none; 
} 

JavaScript

$(document).ready(function() { 
    // Open the first, modal popup 
    $.magnificPopup.open({ 
     items: { 
     src: $('#modal_popup') 
     }, 
     type: 'inline', 
     modal: true 
    }); 

    // Open the second, non-modal popup 
    setTimeout(function() { 
     $.magnificPopup.open({ 
     items: { 
      src: $('#non_modal_popup') 
     }, 
     type: 'inline', 
     modal: false, 
     closeBtnInside: true 
     }); 
    }, 2000); 
    }); 

ответ

1

Вы должны вызвать метод $.magnificPopup.close() перед открытием второго всплывающего окна, если вам это нужно с различными опциями.

+0

Я пробовал это, но тогда второе всплывающее окно никогда не открывалось. Я попытаюсь воспроизвести на jsfiddle и обновить вопрос. БОЛЬШОЙ плагин, кстати, спасибо за его создание. –

+0

Причина, по которой метод close не работал для меня изначально, состоял в том, что у меня была опция removeDelay, равная 300. Предположительно к моменту, когда метод смог закрыть всплывающее окно, второй уже был добавлен в DOM, и они были оба удалены. –