Закрыть Bootstrap модальный из внутри фрейма

страницы, который открывает Twitter Bootstrap Modal с IFRAME внутри:Закрыть Bootstrap модальный из внутри фрейма

<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-modal.html, чтобы закрыть модальную. То, что я пробовал, но не успешно:

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

источник

2013-03-06 Constantin.FF

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

например.

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

Тогда из фрейма, вызовите его с помощью:

window.parent.closeModal();

источник

2013-03-06 15:23:20

Спасибо! Именно то, что я искал. –

Другим решением будет использование [postMessage] (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) из iframe, чтобы уведомить родительское окно, чтобы скрыть модальное (это будет работать, даже если iframe имеет другой домен). – drakyoko

Поскольку bootstrap 3 позволяет только один модальный быть открытым в любой момент времени, вы можете сделать это более универсальным, используя имя класса вместо атрибута ID: window.closeModal = function() { $ ('. Modal'). модальный ('скрыть'); }; –

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

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

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

источник

2014-05-30 18:00:19 JoshMB

Спасибо за объяснение, отлично работает. – mikesjawnbit

еще одно решение в случае, если вы не знаете 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 вы можете найти here

источник

2016-07-05 10:52:24 demo

Благодарим вас за элегантное, но самое общее решение, которое может быть реализовано в приложении без необходимости переписывать один и тот же/похожий код каждый раз - для этой конкретной проблемы! Этот ответ должен на самом деле забрать больше очков ... :) –

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

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

источник

2017-01-18 09:13:32 dtmiRRor

Закрыть Bootstrap модальный из внутри фрейма

ответ

Смежные вопросы