HTML5开发之 -- 模态突出窗（bootstrap）

最近在学习web端开发相关，bootstrap非常好用！

有个模态弹出窗的效果，在此记录下：

1、导入：

<script src="libs/js/jquery-3.2.1.min.js"></script>
<script src="libs/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="libs/css/bootstrap.min.css">

2、具体代码实现：

<body>
    <button class="btn btn-primary" type="button">点击我</button>
    <div class="modal fade" id="myModel">
        <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>
        $(function () {
            $(".btn").click(function () {
                $("#myModel").modal("toggle");
            });
        });
    </script>

</body>

效果如下：

 

posted @ 2017-09-01 11:02  稻草人11223  阅读(342)  评论(0)  编辑  收藏  举报
返回顶部