web-dev-qa-db-de.com

Schließen Sie Bootstrap-Modal von innen nach iframe

Seite, die Twitter Bootstrap Modal mit iframe im Inneren öffnet:

<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 suche nach einer Möglichkeit, diese Modalität aus dem iframe heraus zu schließen. Klicken Sie auf einen Link im iframe-modal.html, um das Modal zu schließen. __ Was ich versucht habe, aber nicht erfolgreich war:

    $('#iframeModal', window.parent.document).modal('hide');
    $('#iframeModal', top.document).modal('hide');
    $('#iframeModal').modal('hide');
javascriptjquerytwitter-bootstrapparent-child
31
Constantin.FF

Sie können immer eine global zugreifbare Funktion erstellen, die das modifizierte Fenster von Bootstrap schließt.

z.B.

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

Rufen Sie es dann vom iframe aus mit auf:

window.parent.closeModal();
57
Dzulqarnain Nasir

Das Problem ist, dass jQuery-Ereignisse in der jQuery-Instanz der einzelnen Seite registriert werden. $('#iframeModal', window.parent.document).modal('hide'); löst also das Hide-Ereignis im iframe aus, nicht im übergeordneten Dokument. 

Das sollte funktionieren: parent.$('#iframeModal').modal('hide');

Dies wird die jQuery-Instanz des übergeordneten Objekts verwenden, um das Element zu finden (es wird also kein Kontext benötigt), und das Ereignis wird dann im übergeordneten Element korrekt ausgelöst.

10
JoshMB

Eine weitere Lösung für den Fall, dass Sie id von Modal nicht kennen, die iframe verwenden:

Funktion hinzufügen CloseModal

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

dabei ist frameElementReferenz auf iframe Elementcontainer.

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

window.parent.CloseModal(window.frameElement);

Mehr über window.frameElement finden Sie hier

3
demo

Sie können auch das Klicken der Schließen-Schaltfläche auslösen:

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