Schließen Sie das Bootstrap-Modal innerhalb des Iframes

Lesezeit: 3 Minuten

Benutzer-Avatar
Constantin.FF

Seite, die Twitter Bootstrap Modal mit darin enthaltenem iframe ö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="https://stackoverflow.com/questions/15249678/iframe-modal.html"></iframe> 
    </div>
    <div class="modal-footer">
    </div>
</div>

Und ich suche nach einer Möglichkeit, dieses Modal innerhalb des Iframes zu schließen. Ex. Klicken Sie auf einen Link in der iframe-modal.html um das Modal zu schließen. Was ich probiert habe, aber ohne Erfolg:

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

Sie können jederzeit eine global zugängliche Funktion erstellen, die das modale Bootstrap-Fenster schließt.

z.B.

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

Rufen Sie es dann aus dem Iframe auf mit:

window.parent.closeModal();

  • Vielen Dank! Genau das, wonach ich gesucht habe.

    – Constantin.FF

    6. März 2013 um 15:57 Uhr

  • Eine andere Lösung wäre die Verwendung von a POST-Meldung aus dem iframe, um das übergeordnete Fenster zu benachrichtigen, das Modal auszublenden (dies würde auch funktionieren, wenn der iframe eine andere Domäne hat).

    – Drakyoko

    11. September 2016 um 10:30 Uhr

  • Da Bootstrap 3 immer nur ein Modal zulässt, können Sie dies universeller gestalten, indem Sie den Klassennamen anstelle des ID-Attributs verwenden: window.closeModal = function(){ $(‘.modal’).modal(‘ ausblenden’); };

    – Lächerlich

    15. August 2017 um 3:57 Uhr


  • Dies löste mein Problem nach 2 Tagen des Ausprobierens. Ich wünschte, ich könnte dir mehr als 1 Stimme geben!

    – Luise

    8. April 2020 um 8:30 Uhr

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

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

Dadurch wird die jQuery-Instanz des übergeordneten Elements verwendet, um das Element zu finden (es ist also kein Kontext erforderlich), und das Ereignis wird dann im übergeordneten Element korrekt ausgelöst.

Eine weitere Lösung, falls Sie es nicht wissen id von Modal, die verwenden iframe :

Funktion hinzufügen CloseModal

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

wo frameElement ist Bezug auf iframe Elementbehälter.

Und dieser Parameter kann von übergeben werden iframe so:

window.parent.CloseModal(window.frameElement);

Mehr über window.frameElement Sie können finden hier

  • Vielen Dank für eine elegante und dennoch generische 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 positive Stimmen erhalten … 🙂

    – Dhruv Saxena

    23. November 2016 um 14:28 Uhr

  • Unterschätzt – DOPE

    – Jordanien

    20. April 2018 um 14:04 Uhr

Sie können auch den Klick auf die Schließen-Schaltfläche auslösen:

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

1215620cookie-checkSchließen Sie das Bootstrap-Modal innerhalb des Iframes

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy