bootstrap 的 模态框在父iframe中弹出

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

bootstrap 的 模态框在父iframe中弹出_第1张图片

然而呢, 实际情况是下面这样,着实尴尬:

bootstrap 的 模态框在父iframe中弹出_第2张图片

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

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

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

iframe1.html



<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <h1>iframe1h1>
    body>
html>

iframe2.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>

        
        <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 titleh5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×span>
                    button>
                  div>
                  <div class="modal-body">
                    ...
                  div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
                    <button type="button" class="btn btn-primary">Save changesbutton>
                  div>
                div>
              div>
            div>
        div>
    body>

html>

最后呢,是主页面的代码 index.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改变之后的代码如下


<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>

        
        <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 titleh5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×span>
                    button>
                  div>
                  <div class="modal-body">
                    ...
                  div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
                    <button type="button" class="btn btn-primary">Save changesbutton>
                  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提供的那个点击按钮,添加了一个自定义的按钮,并且添加了οnclick=”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" >

<div class="modal fade bs-example-modal-sm" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >

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

"modal"> modal code ...

第四步呢,就是写你的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>

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

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

你可能感兴趣的:(前端)