modal弹出两层

来源:1-3 模态弹出框(Modals)

笔杆战神

2016-09-20 17:19

怎么弹出两层?就是在这个modal上加个按钮再弹出

写回答 关注

1回答

  • qq_向日葵的微笑_24020506
    2016-09-21 11:04:25
    已采纳

    <!DOCTYPE HTML>

    <html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>模态弹出窗的使用</title>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    </head>

    <body>


    <!-- data-target触发模态弹出窗元素 -->

    <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>

    <!-- 模态弹出窗内容 -->

    <div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                    <h4 class="modal-title">模态弹出窗标题</h4>

                </div>

                <div class="modal-body">

                    <p>模态弹出窗主体内容</p>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                    <button type="button" class="btn btn-primary" id="goon">继续</button>

                </div>

            </div>

        </div>

    </div>

    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                    <h4 class="modal-title">模态弹出窗标题</h4>

                </div>

                <div class="modal-body">

                    <p>模态弹出窗主体内容</p>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                    <button type="button" class="btn btn-primary">保存</button>

                </div>

            </div>

        </div>

    </div>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script>

        $(function(){

            $("#goon").click(function(){

                $("#modal").modal("toggle");

            })

        })

    </script>

    </body>


    笔杆战神

    非常感谢!

    2016-09-22 09:49:30

    共 1 条回复 >

玩转Bootstrap(JS插件篇)

带领大家学习怎么使用JS自由控制Bootstrap中提供的组件

128657 学习 · 296 问题

查看课程

相似问题