從iframe內部關閉Bootstrap模式

Question

使用iframe打開Twitter Bootstrap Modal的頁面：

<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內部關閉此模態的方法。 防爆。 單擊iframe-modal.html內的鏈接以關閉模式。 我嘗試了什么，但沒有成功：

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

Answer 1

您始終可以創建一個全局可訪問的函數來關閉Bootstrap模式窗口。

例如。

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

然后從iframe中調用它：

window.parent.closeModal();

Answer 2

問題是jQuery事件正在使用單個頁面的jQuery實例注冊。 所以， $('#iframeModal', window.parent.document).modal('hide'); 實際上是要在iframe中觸發hide事件，而不是父文檔。

這應該工作： parent.$('#iframeModal').modal('hide');

這將使用父的jQuery實例來查找項（因此不需要上下文），然后它將在父項中正確觸發事件。

Answer 3

如果你不知道使用iframe的模態的id ，還有一個解決方案：

添加函數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更多信息，請點擊此處

Answer 4

您也可以觸發單擊關閉按鈕：

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