Закрыть Bootstrap modal изнутри iframe

Страница, которая открывает Twitter Bootstrap Modal с 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>

И я ищу способ закрыть этот модал изнутри iframe. Ex. щелкнув ссылку внутри iframe-modal.html, чтобы закрыть модальный. То, что я пробовал, но не удалось:

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

Ответы

Ответ 1

Вы всегда можете создать глобально доступную функцию, которая закрывает модальное окно Bootstrap.

например.

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

Затем из iframe вызовите его, используя:

window.parent.closeModal();

Ответ 2

Проблема заключается в том, что события jQuery регистрируются с отдельным экземпляром страницы jQuery. Таким образом, $('#iframeModal', window.parent.document).modal('hide'); фактически запускает событие hide в iframe, а не в исходный документ.

Это должно работать: parent.$('#iframeModal').modal('hide');

Это будет использовать родительский экземпляр jQuery для поиска элемента (так что не нужен контекст), и он будет правильно запускать событие в родительском.

Ответ 3

Еще одно решение, если вы не знаете id модальных, которые используют iframe:

Добавить функцию CloseModal

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

где frameElement относится к контейнеру элементов iframe.

И этот параметр можно передать из iframe следующим образом:

window.parent.CloseModal(window.frameElement);

Подробнее о window.frameElement вы можете найти здесь

Ответ 4

Вы также можете нажать кнопку закрытия:

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