从 iframe 打开模态窗口到父级答案

【问题标题】：open modal window from iframe into the parent从 iframe 打开模态窗口到父级
【发布时间】：2012-04-23 16:26:07
【问题描述】：

我有一个带有 iframe 的页面，在这个 iframe 内有一些链接应该在父窗口中打开一个模式窗口。问题是我无权将代码放入父窗口。我只能访问这个 iframe。有没有办法用 jquery 来完成这种限制？

谢谢！

【问题讨论】：

【解决方案1】：

可以使用JQuery插件SimpleModal

有一个名为“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%');

如果您要作为模态打开的 div 在您的父窗口中，您可以将 $('#div-modal') 替换为 $(window.parent.document).find('#div-modal')

【讨论】：

很好的解决方案，效果很好！你知道这是否兼容跨浏览器？
我真的不知道。我在 Chrome 和 Opera 中进行了测试。可能您应该在插件页面中检查。

【解决方案2】：

花 1 天时间从 iframe 文档打开模态窗口首先我做了一个案例：

parent.$("#you_modal_window_selector").css("visibility", "visible");

！！！关键字 changin 是 PARENT。（小写）

其次，我用脚本更改 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>

【讨论】：