Twitterを開くページBootstrap内部に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内から閉じる方法を探しています。例iframe-modal.html
内のリンクをクリックして、モーダルを閉じます。私が試したが、成功しなかったもの:
$('#iframeModal', window.parent.document).modal('hide');
$('#iframeModal', top.document).modal('hide');
$('#iframeModal').modal('hide');
Bootstrapモーダルウィンドウを閉じるグローバルにアクセス可能な関数をいつでも作成できます。
例えば。
window.closeModal = function(){
$('#iframeModal').modal('hide');
};
次に、iframeから、次を使用して呼び出します。
window.parent.closeModal();
問題は、jQueryイベントがjQueryの個々のページのインスタンスに登録されていることです。したがって、$('#iframeModal', window.parent.document).modal('hide');
は、実際には親ドキュメントではなく、iframeのhideイベントをトリガーします。
これは動作するはずです:parent.$('#iframeModal').modal('hide');
これは、jQueryの親のインスタンスを使用してアイテムを検索し(コンテキストは不要です)、親でイベントを正しく発生させます。
id
を使用するモーダルのiframe
がわからない場合のもう1つの解決策:
関数を追加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
の詳細 こちら
閉じるボタンのクリックをトリガーすることもできます。
$('#iframeModal button.mce-close', parent.document).trigger('click');