jQuery 从 iframe 打开模态窗口到父级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10284419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
open modal window from iframe into the parent
提问by filistea
I have a page with an iframe, and inside this iframe are some links that should open a modal window in the parent window. The thing is I dont have access to put code into the parent window. I just have access to this iframe. Is there a way this could be done with jquery with such limitations?
我有一个带有 iframe 的页面，在这个 iframe 里面有一些链接，它们应该在父窗口中打开一个模态窗口。问题是我无权将代码放入父窗口。我只能访问这个 iframe。有没有办法用具有这种限制的 jquery 来做到这一点？
Thank you!
谢谢！
采纳答案by Renato
You can use JQuery plugin SimpleModal
您可以使用 JQuery 插件SimpleModal
There's an option called "appendTo", where you can tell where do you put your Modal. The only problem with that approach is that the modal's overlay appear with iframe's size, so you must give it your desired width and height after you open it.
有一个名为“appendTo”的选项，您可以在其中告诉您将 Modal 放在哪里。该方法的唯一问题是模态的叠加显示为 iframe 的大小，因此您必须在打开它后为其指定所需的宽度和高度。
$('#div-modal').modal({
appendTo: $(window.parent.document).find('body'),
overlayCss: {backgroundColor:"#333"}, // Optional overlay style
overlayClose:true,
});
// Set overlay's width
$(window.parent.document).find('#simplemodal-overlay').css('width', '100%');
If the div you want to open as a modal is in your parent window, you could replace $('#div-modal')with $(window.parent.document).find('#div-modal')
如果要作为模态打开的 div 位于父窗口中，则可以替换$('#div-modal')为$(window.parent.document).find('#div-modal')
回答by Maksim Goa
Spend 1 day to open modal windows from iframe document first i did single case :
首先花 1 天时间从 iframe 文档打开模态窗口，我做了一个案例：
parent.$("#you_modal_window_selector").css("visibility", "visible");
!!! keyword changin matter is PARENT. (in small letters)
！！！关键字更改事项是 PARENT。（小写字母）
Second i change all buttons in iframe included document with script:
其次，我使用脚本更改 iframe 包含的文档中的所有按钮：
<script>
$(function() {
$(".open-modal").on("click", function (e) {
var $this = $(this),
$href = $this.attr("href");
e.preventDefault();
parent.$($href).css("visibility", "visible");
parent.$(".modal-window-dark").css("visibility", "visible");
});
});
</script>
