bootstrap嵌套模态框完美解决

没有天赋的搬砖者

于 2023-11-29 09:11:18 发布

阅读量553

点赞数 7

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/sdad2154/article/details/134681604

版权

本身官网不支持嵌套但是可以弹出两个模态框后者会在html上覆盖前者这样每次都可以操作自己的模态框了

上代码

<!DOCTYPE&nbsp;html>
<html>
<head>
    <meta charset='utf-8'>
    <title>bootstrap模态框(modal)</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">


    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script>$(function () {
        $("#btn2").click(function () {
            $("#show2").modal("show");
        });
    })</script>
</head>
<body>
<div class="container "><h1&nbsp;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&nbsp;class="modal-title">一层模态框</h1>
                <input type="text">
                <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
                    <input type="text">
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>