Question

我试图在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>

请帮帮我。任何帮助都很明显。提前谢谢。

Answer 1

当我测试（localy not on server）你的代码时，我变成了这个错误：

＆＃34; Uncaught SecurityError：阻止了一个包含起源的帧＆＃34; null＆＃34;从访问带有原点＆＃34; null＆＃34;的框架。协议，域和端口必须匹配。＆＃34;

也许this会帮助你。

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

1 个答案: