bootstrap 的模态框在父iframe中弹出

作为一个后台，公司没前端真的很痛苦，所以就得写页面，用的bootstrap的modal，但是碰到坑了，先上图，期望结果如下

这里写图片描述

然而呢，实际情况是下面这样，着实尴尬：

这里写图片描述

首先，作为一个后台，真的吐槽下网上找到的那些方式，真的是看着都不懂，何况解决问题

废话不多说，现在说解决办法，其实很简单，没有网上那么多繁琐的步骤，总共改掉的地方也仅仅只有十几行代码

吐槽完了，那么上源码，先来没有解决的，总共是三个html文件，其中modal是直接拷贝bootstrap官网的，没有任何变动的源码

iframe1.html

<!-- 昂，只是个demo，简单形象，就啥也没多写 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>iframe1</h1>
    </body>
</html>

iframe2.html，也就是模态框所在的页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
        <script type="text/javascript" src="../bootstrap/js/bootstrap.js" ></script><br />
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
    </head>
    <body>
        <button id="chooseIndex" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >
          Launch demo modal
        </button>

        <!-- Modal -->
        <div id="modal">
            <div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    ...
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </body>

</html>

最后呢，是主页面的代码 index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
        <script type="text/javascript" src="../bootstrap/js/bootstrap.js" ></script><br />
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
    </head>
    <body>
        <iframe src="iframe1.html" style="width: 40%;height: 1000px;"></iframe>

        <iframe src="iframe2.html"  style="width: 50%;height: 1000px;"></iframe>

    </body>
</html>

现在呢，要做的很简单，index.html 和 iframe.html页面的源码不需要任何改变！只需要动有模态框的页面iframe2.html！

iframe2.html改变之后的代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
        <script type="text/javascript" src="../bootstrap/js/bootstrap.js" ></script><br />
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
    </head>

    <body>

        <button onclick="showModal()">展示模态框</button>

        <!-- Modal -->
        <div id="modal">
            <div class="modal fade bs-example-modal-sm" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    ...
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </body>
    <script>
        function showModal(){
            var topBody = $(top.document.body);
            topBody.append($("#modal").html());

            // 打开父页面的modal框
            window.top.$(".bs-example-modal-sm").modal();

            // 阻止模态框的多次弹出
            window.top.$(".bs-example-modal-sm").on('hidden.bs.modal',function(){
                if($(".bs-example-modal-sm",top.document)!=null){
                    $(".bs-example-modal-sm",top.document).remove();
                }
                return;
            });
        }

    </script>

</html>

现在说下，都改动的地方，首先，第一步，删掉了，bootstrap提供的那个点击按钮，添加了一个自定义的按钮，并且添加了onclick=”showModal()”，当然如果想保留样式，也可以，但是需要删掉data-target=”#exampleModal”，这个属性。

<button onclick="showModal()">展示模态框</button>

第二步，给模态框最外层的div加上一个class，

<!-- 本来的代码 -->
<div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<!-- 添加了一个class后的代码，有点长哈 -_-! 后面的不用看，都没动 -->
<div class="modal fade bs-example-modal-sm" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >

然后，第三步，给模态框所有的div外面加了一层div，自定义id=”modal”

<div id="modal">   modal code ...  </div>

第四步呢，就是写你的onclick方法了，不再详说，注释很详细

<script>
        function showModal(){
            // 获取最顶层的页面
            var topBody = $(top.document.body);

            // 将模态框的代码添加到顶层页面里面
            topBody.append($("#modal").html());

            // 从顶层页面里面打开模态框
            window.top.$(".bs-example-modal-sm").modal();

            // 阻止模态框的多次弹出，这块不明白的可以，去掉下面的这部分，然后使劲打开，关闭你的modal就明白了
            window.top.$(".bs-example-modal-sm").on('hidden.bs.modal',function(){
                if($(".bs-example-modal-sm",top.document)!=null){
                    $(".bs-example-modal-sm",top.document).remove();
                }
                return;
            });

        }

    </script>

bootstrap 的模态框在父iframe中弹出

作为一个后台，公司没前端真的很痛苦，所以就得写页面，用的bootstrap的modal，但是碰到坑了，先上图，期望结果如下

然而呢，实际情况是下面这样，着实尴尬：

首先，作为一个后台，真的吐槽下网上找到的那些方式，真的是看着都不懂，何况解决问题

废话不多说，现在说解决办法，其实很简单，没有网上那么多繁琐的步骤，总共改掉的地方也仅仅只有十几行代码

吐槽完了，那么上源码，先来没有解决的，总共是三个html文件，其中modal是直接拷贝bootstrap官网的，没有任何变动的源码

iframe1.html

iframe2.html，也就是模态框所在的页面

最后呢，是主页面的代码 index.html

现在呢，要做的很简单，index.html 和 iframe.html页面的源码不需要任何改变！只需要动有模态框的页面iframe2.html！

iframe2.html改变之后的代码如下

现在说下，都改动的地方，首先，第一步，删掉了，bootstrap提供的那个点击按钮，添加了一个自定义的按钮，并且添加了onclick=”showModal()”，当然如果想保留样式，也可以，但是需要删掉data-target=”#exampleModal”，这个属性。

第二步，给模态框最外层的div加上一个class，

然后，第三步，给模态框所有的div外面加了一层div，自定义id=”modal”

第四步呢，就是写你的onclick方法了，不再详说，注释很详细

到这里就完成了，希望能给各位像我一样后台的前端小白带来解决办法，有问题可以留言，在线秒回

最后说下，在这样修改了modal之后，相当于，把modal放在顶层页面了，所以，如果页面里面做了对modal的js或者css样式的修改，都必须将这些js和css代码放到你顶层的html或者jsp文件中，否则，模态框上面的那些操作就是无效了。

猜你喜欢

bootstrap 的 模态框在父iframe中弹出

作为一个后台，公司没前端真的很痛苦，所以就得写页面，用的bootstrap的modal，但是碰到坑了，先上图，期望结果如下

然而呢， 实际情况是下面这样，着实尴尬：

首先，作为一个后台，真的吐槽下网上找到的那些方式，真的是看着都不懂，何况解决问题

废话不多说，现在说解决办法， 其实很简单，没有网上那么多繁琐的步骤，总共改掉的地方也仅仅只有十几行代码

吐槽完了，那么上源码，先来没有解决的，总共是三个html文件，其中modal是直接拷贝bootstrap官网的，没有任何变动的源码

iframe1.html

iframe2.html，也就是模态框所在的页面

最后呢，是主页面的代码 index.html

现在呢， 要做的很简单，index.html 和 iframe.html页面的源码不需要任何改变！只需要动有模态框的页面iframe2.html！

iframe2.html改变之后的代码如下

现在说下，都改动的地方，首先，第一步，删掉了，bootstrap提供的那个点击按钮，添加了一个自定义的按钮，并且添加了onclick=”showModal()”，当然如果想保留样式，也可以，但是需要删掉data-target=”#exampleModal”，这个属性。

第二步， 给模态框最外层的div加上一个class，

然后， 第三步，给模态框所有的div外面加了一层div，自定义id=”modal”

第四步呢，就是写你的onclick方法了 ，不再详说， 注释很详细

到这里就完成了， 希望能给各位像我一样后台的前端小白带来解决办法，有问题可以留言，在线秒回

最后说下， 在这样修改了modal之后，相当于，把modal放在顶层页面了，所以，如果页面里面做了对modal的js或者css样式的修改， 都必须将这些js和css代码放到你顶层的html或者jsp文件中， 否则，模态框上面的那些操作就是无效了。

猜你喜欢

bootstrap 的模态框在父iframe中弹出

然而呢，实际情况是下面这样，着实尴尬：

废话不多说，现在说解决办法，其实很简单，没有网上那么多繁琐的步骤，总共改掉的地方也仅仅只有十几行代码

现在呢，要做的很简单，index.html 和 iframe.html页面的源码不需要任何改变！只需要动有模态框的页面iframe2.html！

第二步，给模态框最外层的div加上一个class，

然后，第三步，给模态框所有的div外面加了一层div，自定义id=”modal”

第四步呢，就是写你的onclick方法了，不再详说，注释很详细

到这里就完成了，希望能给各位像我一样后台的前端小白带来解决办法，有问题可以留言，在线秒回

最后说下，在这样修改了modal之后，相当于，把modal放在顶层页面了，所以，如果页面里面做了对modal的js或者css样式的修改，都必须将这些js和css代码放到你顶层的html或者jsp文件中，否则，模态框上面的那些操作就是无效了。