2014-11-04 66 views
1

使用Magnific Popup可以強制第二個彈出框在第一個彈出框打開,而第一個彈出框仍然打開時接受新選項?該documentation狀態如下:Magnific Popup:用不同的選項打開第二個彈出框

「如果彈出窗口已經打開 - 它只會overwite內容(但舊 選項將被保留)。」

我在某些JavaScript中使用public open()方法打開彈出窗口。我的問題是,我的第一個彈出窗口是模式,所以沒有關閉按鈕添加到它。第二個彈出窗口不應該是模態的,而是因爲它使用第一個選項而不是它自己的選項,所以它是模態的。

下面是與問題的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並更新問題。順便說一下,GREAT插件,謝謝你創建它。 – 2014-11-08 17:19:50

+0

close方法最初不適用於我的原因是因爲我將removalDelay選項設置爲300.假定方法能夠關閉彈出窗口,第二個方法已經添加到DOM,它們是都被刪除。 – 2014-11-14 08:57:45

相關問題