/ / Magnific Popup: Zweites Popup mit verschiedenen Optionen - Javascript, Jquery, Magnific-Popup

Magnific Popup: Öffnen des zweiten Popups mit verschiedenen Optionen - javascript, jquery, magnific-popup

Mit Magnific Popup ist es möglich, ein zweites Popup zu erzwingen, das geöffnet wird, während das erste noch geöffnet ist, um neue Optionen zu akzeptieren. Das Dokumentation gibt folgendes an:

"Wenn Popup bereits geöffnet ist - wird es den Inhalt überschreiben Optionen werden beibehalten). "

Ich öffne das Popup mit dem public open ()Methode in etwas JavaScript. Mein Problem ist, dass mein erstes Popup modal ist, also keine Schaltfläche zum Schließen hinzugefügt wurde. Das zweite Popup sollte nicht modal sein, aber da es die Optionen des ersten verwendet und nicht die eigenen, ist es modal.

Hier ist ein jsFiddle mit dem Problem: jsfiddle

Hier ist ein Beispiel:

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);
});

Antworten:

1 für die Antwort № 1

Sie müssen anrufen $.magnificPopup.close() Methode vor dem Öffnen des zweiten Popups, wenn Sie es mit verschiedenen Optionen benötigen.