web-dev-qa-db-fra.com

Fermer Bootstrap modal depuis l’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 de l'intérieur de l'iframe . Ex. en cliquant sur un lien dans le iframe-modal.html pour fermer le modal . Ce que j'ai essayé, mais sans succès:

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

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, à partir de l'iframe, appelez-le en utilisant:

window.parent.closeModal();
57
Dzulqarnain Nasir

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

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

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

10
JoshMB

Une solution supplémentaire au cas où vous ne connaissez pas id de modal et qui utilise iframe:

Ajouter une fonction CloseModal

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

où frameElement est référence à iframe élément conteneur.

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

window.parent.CloseModal(window.frameElement);

Plus sur window.frameElement vous pouvez trouver ici

3
demo

Vous pouvez également déclencher le clic sur le bouton de fermeture:

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