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

【问题标题】：open a modal window from iframe into the parent window从 iframe 打开一个模态窗口到父窗口
【发布时间】：2016-12-11 15:58:57
【问题描述】：

我正在尝试从 iframe 在父页面中打开模式对话框（打开模式对话框的按钮在 iframe 中，但模式 div 在父页面中）。但没有成功。

我有一个父页面，如下所示：-

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script src="basic.js"></script>
            <script src="jquery.simplemodal.js"></script>
        </head>
        <body>
            <iframe src="Frame-1.html" width="400" height="400"></iframe>
            <iframe src="Frame-2.html" width="400" height="400"></iframe>

            <div id="modalPopup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                    </div>
                </div>
            </div>
        </body>
        </html>

Frame-1.html 中的代码如下：-

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Modal popup</title>
        <link rel="stylesheet" href="./bootstrap.min.css" />
        <script src="./jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="./bootstrap.min.js" type="text/javascript"></script>
        <script src="basic.js"></script>
        <script src="jquery.simplemodal.js"></script>
        <script>
            $(document).on('hide.bs.modal', '#modalPopup', function () {
                alert('');
                //Do stuff here
            });

            //alert($(window.parent.document).find('#modalPopup').modal);

            $(window.parent.document).find('#modalPopup').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%');
        </script>
    </head>
    <body>
            <button type="button" class="btn" name="btn" id="btn" data-target="#modalPopup"
                    data-toggle="modal" data-backdrop="static" data-keyboard="false" href="./Popup.html">
                Click ME!
            </button>
    </body>
    </html>

请帮助我。任何帮助都是可观的。提前致谢。

【问题讨论】：

您的问题已经被问及回答过：stackoverflow.com/a/951987/6681296
抱歉，阅读您的共享链接后我无法解决我的问题。

标签： jquery html iframe popup modal-dialog

【解决方案1】：

我在测试（本地不在服务器上）您的代码时出现此错误：

“未捕获的安全错误：阻止来源为“null”的帧访问来源为“null”的帧。协议、域和端口必须匹配。”

也许this 会帮助你。

【讨论】：

我不知道怎么回事，但是在运行上面的代码时我没有遇到这种类型的错误。
@Codder 你是对的。我认为这是因为我在本地运行它现在我把它放在我的服务器上并且它工作正常
@Codder 我想这会对你有所帮助：stackoverflow.com/questions/15249678/…