Question

我有一个包含iframe的页面。在这个iframe中，我有一个打开模态的按钮。模态代码位于主窗口中，而不在iframe内。

在这个模态中，我有一个打开其他模态的按钮。第二个模态位于主窗口中，而不是iframe内部。

当我关闭2个模态时，主窗口中的滚动消失了。

使用Google Chrome Inspector查看课程＆＃34;模态打开＆＃34;在身体标签。如果我删除这个类，滚动会再次返回。

如果我打开第二个模态而不使用iframe中的按钮打开模态，则一切正常。如果我首先用iframe中的按钮打开模态，然后打开第二个模态，关闭2个模态后，类＆＃34;模态打开＆＃34;未从正文标签（主窗口）中删除，滚动消失。

我试图强制删除课程＆＃34;模态打开＆＃34;关闭第二个模态后，从主窗口中的body标签，使用此代码：

$('#my-second-modal').on('hide.bs.modal', function (event) {
    $('body').removeClass('modal-open');
});

它有效，因为它删除了类＆＃34;模态打开＆＃34;，但自动再次添加此类！我看到班级被删除并添加了！

当模态打开时，body标签会收到类＆＃34; modal-open＆＃34;还有一点内联风格：

style="padding-right: 15px;"

当我关闭第二个模态时，这个样式被正确删除并且不再添加，只有类＆＃34;模态打开＆＃34;。

我不知道如何自动添加此课程。我在另一个页面中也有2个opend模态，但所有模态都在主窗口中调用，我没有iframe。在这个页面中，工作正常。

问题在于iframe内部调用的模式。

我正在使用Twitter Bootstrap 3.3.7。

我很感激任何帮助。

编辑1：

我必须修复信息，因为两个模态都在主窗口中。只有调用第一个模态的按钮才能进入iframe。

当我打开第一个模态（iframe中的按钮）时，iframe中的body标签会收到类＆＃34; modal-open＆＃34;。当我打开第二个模态（第一个模态中的按钮）时，主窗口的主体标签接收类＆＃34;模态打开＆＃34;。

当我关闭第二个模态时，主窗口的body标签中的内联样式（padding-left）被删除，但是类＆＃34;模态打开＆＃34;才不是。当我关闭第一个模态时，类＆＃34;模态打开＆＃34;正确删除了de iframe中的body标签。

主窗口代码

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <title>Main Window</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" media="all" href="/dev-assets/font-awesome.self-ae5944f442c4b0b183eda9a324292760ce827907d2ce6c2a238b2731b326a7f1.css?body=1" />
    <link rel="stylesheet" media="all" href="/dev-assets/my-page.self-5cb0c84bdcdd793a871aa1a02ed64373c4e5e2090ed90f8dc6a2b533a400938c.css?body=1" />
    <!--[if IE]><link rel="stylesheet" media="all" href="/stylesheets/iehacks.css" /><![endif]-->
</head>

<body>
    <main class="container">
        <section class="application">
            <div id="iframe_edit">
                <iframe src="/my-page?edit_fields=1" onload="this.style.height=this.contentDocument.body.scrollHeight +'px';"></iframe>
            </div>

            <!-- THIS IS THE FIRST MODAL CALLED INSIDE IFRAME -->
            <div class="modal fade" id="modalFields" tabindex="-1" role="dialog" aria-labelledby="modalFieldsLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="modalFieldsLabel">TITLE FIRST MODAL</h4>
                        </div>
                        <div class="modal-body">
                            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalFields">
                                Launch Second Modal
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script src="/dev-assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
    <script src="/dev-assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
    <script src="/dev-assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1"></script>
    <script src="/dev-assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
    <script src="/dev-assets/jquery.mask.self-3b775d6e0b0f5cff98aca4daaa7f27a7c3678f39d1f5186776bb14b63cc2f625.js?body=1"></script>
    <script src="/dev-assets/my-page.self-379839c031efa970d9805b32480311472415bda146fb2a677aef5d7f882313b1.js?body=1"></script>

    <!-- THIS IS THE SECOND MODAL CALLED IN THE FIRST MODAL -->
    <div class="modal fade" id="ModalGalleryImg" tabindex="-1" role="dialog" aria-labelledby="ModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="ModalLabel">TITLE SECOND MODAL</h4>
                </div>
                <div class="content modal-body">
                    <div class='content'>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet minima iure consequuntur, fugiat, quasi fugit molestiae, cumque tempora similique sunt. Animi veniam architecto odit id mollitia modi placeat rerum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

iframe代码

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>My IFRAME</title>
    <meta property="og:title" content="My IFRAME">
    <meta name="twitter:title" content="My IFRAME">

    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="/piq31mMqVDPVA0evy8fn6BkMK6OoQ1x1JSnNJ7QKezoWF+amLU4F+S5CN0oKHpFXz1IvUg98wiJeWk//ZyroA==" />
    <link rel="stylesheet" media="all" href="/dev-assets/font-awesome.self-ae5944f442c4b0b183eda9a324292760ce827907d2ce6c2a238b2731b326a7f1.css?body=1" />
    <link rel="stylesheet" media="all" href="/dev-assets/my-iframe/css/style.self-8c572b6acc14a939ae61a606b2bfe36f8c47defcbe0c2e9fb8d8061f773a00a0.css?body=1" />
    <link rel='dns-prefetch' href='//s.w.org'>
</head>

<body class="palette-main">
    <header class="container bg-header"></header>
    <div id="MenuArea" class="container"></div>

    <main class="container">
        <div class="row">
            <div class="col-xs-12" data-group="group1">
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalFields">
                    Launch First Modal
                </button>

                <div class="contorno-topico">
                    <div class="caption-main">
                        <h3 class="title-white" data-line="title_group1">TITLE G1</h3>
                        <p data-multiline="body_group1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sit quisquam tempora? At obcaecati similique ab soluta illo, itaque? Voluptates quia fugiat ullam nihil esse doloremque possimus omnis perspiciatis laborum.</p>
                    </div>
                    <div style="background-image: url(/dev-assets/default-654645645.jpg); background-size: contain" data-bg="/dev-assets/default-654645645.jpg" data-image="image_group1"></div>
                </div>
            </div>
        </div>
    </main>

    <script src="/dev-assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
    <script src="/dev-assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
    <script src="/dev-assets/site.self-4f08fc2b9ee0dc10cdc3b91b3c48199e757c0564fe65e1fe4f9bf26bb354b1f1.js?body=1"></script>
    <script src="/dev-assets/bootstrap.min.self-d66e555f160df017adf1ca16a36cd609a36d49c51637e365c5b8847d0065fa40.js?body=1"></script>
    <script src="/dev-assets/my-iframe/js/main.self-b849589d36316233b46ae6e1419e23af2945ebc08a0aac2529a52985f6f94b2a.js?body=1"></script>
</body>
</html>

Answer 1

我解决了改变打开模态的方法的问题。我没有使用按钮中的数据属性打开，而是使用JS：

点击iframe内的按钮以打开模态

    $('.first-modal').click(function(){
        window.parent.$('#modalFields').modal('show');
    });

这样，模态将在主窗口上下文中打开并且工作正常。

iframe中的模态在关闭其他模态后在主窗口中删除滚动

1 个答案: