Bootstrap多层模态框如何嵌套？

来源：互联网发布：剑三萝莉脸型数据网盘编辑：程序博客网时间：2024/05/18 01:33
我希望，首先打开模态框1，然后打开模态框2，然后关闭模态框2，然后关闭模态框1.但是我发现打开模态框1再打开模态框2的时候，模态框2被模态框1压住了，我希望模态框2压住模态框1.于是不会了~求教我知道bootstap是不支持多层模态框，但是还是希望完成这个功能，请知道答案的人回答一下谢谢！
提问者采纳
使用js去弹出第二个模态框 其一：
<!DOCTYPE html><html>    <head>        <meta charset='utf-8'>        <title>bootstrap模态框(modal)</title>        <link href="../../css/bootstrap.min.css" rel="stylesheet">        <script src="../../js/jquery-2.1.1.min.js"></script>        <script src="../../js/bootstrap.min.js"></script>        <!--jquery必须是1.9.0版本以上的   -->        <script>            $(function(){                      $("#btn2").click(function(){                                              $("#show2").modal("show");                   });                              })        </script>    </head>    <body>        <div class="container ">            <h1 class="page-header">bootstrap模态框(modal)</h1>            <button class="btn btn-primary" data-toggle='modal' data-target='#show'>登陆</button>            <div class="modal fade  " id='show' >                <div class="modal-dialog">                    <div class="modal-content">                        <button class="close" data-dismiss='modal'>×</button>                        <h1 class="modal-title">一层模态框</h1>                        <div class="modal-footer">                            <button class="btn btn-primary" data-toggle='modal' id="btn2">再弹</button>                        </div>                    </div>                </div>            </div>            <div class="modal fade  " id='show2'>                <div class="modal-dialog">                    <div class="modal-content">                        <button class="close" data-dismiss='modal'>×</button>                            <h1 class="modal-title">二层模态框</h1>                        <div class="modal-body">                            12312312                        </div>                        <div class="modal-footer">                                                    </div>                    </div>                </div>            </div>        </div>    </body></html>


x_men_01
很好，非常感谢，很好的解决了我的难题，就是bootstrap模态框无法重叠的问题，不过第二个模态框我没使用js调用方式，而还是使用第一个模态框弹出来的方式，即： <button class="btn btn-primary" data-toggle='modal' id="btn2" data-target="#show2">再弹 </button> 好用，非常感谢~！


其二：
这篇文章主要介绍了使用jQuery和Bootstrap实现多层、自适应模态窗口,需要的朋友可以参考下
本篇实践一个多层模态窗口，而且是自适应的。
点击页面上的一个按钮，弹出第一层自适应模态窗口。
在第一层模态窗口内包含一个按钮，点击该按钮弹出第二层模态窗口，弹出的第二层模态窗口会挡住第一层模态窗口，即第二层模态窗口打开的时候，无法关闭第一层模态窗口。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>test2.html</title><link href="../css/bootstrap.min.css" rel="stylesheet"><script src="../js/jquery-2.1.1.min.js"></script><script src="../js/bootstrap.js"></script>    <style type="text/css">        .modal-open,        .modal-open .navbar-fixed-top,        .modal-open .navbar-fixed-bottom {            margin-right: 0;        }        .modal {            bottom: auto;                        padding: 0;            background-color: #ffffff;            border: 1px solid #999999;            border: 1px solid rgba(0, 0, 0, 0.2);            border-radius: 6px;            -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);            box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);            background-clip: padding-box;            overflow-y: auto;        }        .modal.container {            max-width: none;        }        #firstmodal {            width: 98%;            height: 98%;        }        #secondmodal {            width: 55%;            height: 55%;        }    </style>    <script type="text/javascript">        $(function() {            $('#m1').on("click", function() {                $('#firstmodal').modal();            });            $('#m2').on("click", function () {                $('#secondmodal').modal();            });        });    </script></head><body>        <div class="content" style="margin-left: 100px;margin-top: 100px;">            <button class="btn btn-primary btn-lg" id="m1">打开第一层模态窗口</button>        </div>        <div id="firstmodal" class="modal container fade" tabindex="-1" style="display: none;">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                <h4 class="modal-title">第一层模态窗口</h4>            </div>            <div class="modal-body">                <p>                    <button class="btn btn-primary btn-lg" id="m2">打开第二层模态窗口</button>                    第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体                             </p>            </div>            <div class="modal-footer" style="text-align: center;">                <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>            </div>        </div>        <div id="secondmodal" class="modal container fade" tabindex="-1" style="display: none;">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                <h4 class="modal-title">第二层模态窗口</h4>            </div>            <div class="modal-body">                <p>                    第二层主体内容主体内容主体内容主体内                </p>            </div>            <div class="modal-footer" style="text-align: center;">                <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>            </div>        </div></body></html>



以上就是jQuery和Bootstrap实现多层、自适应模态窗口的全部内容了，非常的不错，而且很实用，直接就可以使用到项目中去。
1 1