Question Fermer le modal Bootstrap depuis iframe


Page qui ouvre Twitter Bootstrap Modal avec iframe à l'intérieur:

<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>

Et je cherche un moyen de fermer ce modal à l’intérieur de l’iframe. Ex. en cliquant sur un lien à l'intérieur du iframe-modal.html fermer le modal. Ce que j'ai essayé, mais non réussi:

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

29
2018-03-06 14:17


origine


Réponses:


Vous pouvez toujours créer une fonction accessible globalement qui ferme la fenêtre modale Bootstrap.

par exemple.

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

Ensuite, depuis l'iframe, appelez-le en utilisant:

window.parent.closeModal();

54
2018-03-06 15:23



Le problème est que les événements jQuery sont enregistrés avec l'instance jQuery de la page individuelle. Alors, $('#iframeModal', window.parent.document).modal('hide'); va effectivement déclencher l'événement hide dans l'iframe, pas le document parent.

Cela devrait fonctionner: parent.$('#iframeModal').modal('hide');

Cela utilisera l'instance parent de jQuery pour trouver l'élément (donc aucun contexte n'est requis), et l'événement sera alors déclenché correctement dans le parent.


9
2018-05-30 18:00



Une solution de plus au cas où vous ne le sauriez pas id de modal qui utilise iframe :

Ajouter une fonction CloseModal

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

frameElement est référence à iframe conteneur d'élément.

Et ce paramètre peut être passé de iframe ainsi:

window.parent.CloseModal(window.frameElement);

Plus à propos window.frameElement tu peux trouver ici


3
2017-07-05 10:52



Vous pouvez également déclencher le clic sur le bouton Fermer:

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

1
2018-01-18 09:13