Schließen Bootstrap modal von innen iframe

Seite, die im Innern mit iframe Twitter Bootstrap Modal öffnet:Schließen Bootstrap modal von innen iframe

<div id="iframeModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="btn btn-danger pull-right" data-dismiss="modal" aria-hidden="true">Close</button> 
     <div class="clearfix"></div> 
    </div> 
    <div class="modal-body"> 
     <iframe src="iframe-modal.html"></iframe> 
    </div> 
    <div class="modal-footer"> 
    </div> 
</div>

Und ich bin auf der Suche nach einem Weg, um diesen modal zu schließen aus dem Innern des iframe. Bsp. Klicken Sie auf einen Link innerhalb der iframe-modal.html, um das Modal zu schließen. Was habe ich versucht, aber nicht erfolgreich:

$('#iframeModal', window.parent.document).modal('hide'); 
    $('#iframeModal', top.document).modal('hide'); 
    $('#iframeModal').modal('hide');

Quelle

2013-03-06 Constantin.FF

Sie können eine global zugängliche Funktion immer schaffen, die die Bootstrap modale Fenster schließt.

window.closeModal = function(){ 
    $('#iframeModal').modal('hide'); 
};

Dann aus dem iframe, rufen Sie es mit:

window.parent.closeModal();

Quelle

2013-03-06 15:23:20

Vielen Dank! Genau das, was ich gesucht habe. –

Eine andere Lösung wäre, eine [postMessage] (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) aus dem iFrame zu verwenden, um das übergeordnete Fenster zu benachrichtigen, das modale zu verbergen (this würde funktionieren, selbst wenn der iframe eine andere Domäne hat). – drakyoko

Da Bootstrap 3 nur zu einem beliebigen Zeitpunkt ein Modal öffnen kann, können Sie dies universeller machen, indem Sie den Klassennamen anstelle des ID-Attributs verwenden: window.closeModal = function() { $ ('.modal'). modal ('verstecken'); }; –

Das Problem ist, dass jQuery Ereignisse mit der einzelnen Seite Instanz von jQuery registriert werden. So wird $('#iframeModal', window.parent.document).modal('hide'); tatsächlich das Ausblenden-Ereignis im Iframe auslösen, nicht das übergeordnete Dokument.

sollte diese Arbeit: parent.$('#iframeModal').modal('hide');

Dies wird die Eltern-Instanz von jQuery verwenden, um die Artikel zu finden (so wird kein Kontext erforderlich), und es wird dann das Ereignis korrekt in der Mutter feuern.

Quelle

2014-05-30 18:00:19 JoshMB

Danke für die Erklärung, funktioniert gut. – mikesjawnbit

Eine weitere Lösung, falls Sie nicht id modaler wissen, welche iframe verwenden:

Add Funktion CloseModal

function CloseModal(frameElement) { 
    if (frameElement) { 
     var dialog = $(frameElement).closest(".modal"); 
     if (dialog.length > 0) { 
      dialog.modal("hide"); 
     } 
    } 
}

wo frameElement ist Bezug auf iframe Element Container.

Und dieser Parameter kann von iframe wie so übergeben werden:

window.parent.CloseModal(window.frameElement);

Mehr über window.frameElement Sie here

Quelle

2016-07-05 10:52:24 demo

Vielen Dank für eine elegante und doch die allgemeinste Lösung, die in der gesamten Anwendung implementiert werden kann, ohne jedes Mal den gleichen/ähnlichen Code neu schreiben zu müssen - für dieses spezielle Problem! Diese Antwort sollte wirklich mehr Upvotes sammeln ... :) –

Sie finden auch auslösen der klicken Sie auf die Schaltfläche zum Schließen:

$('#iframeModal button.mce-close', parent.document).trigger('click');

Quelle

2017-01-18 09:13:32 dtmiRRor

Schließen Bootstrap modal von innen iframe

Antwort

Verwandte Themen