Bootstrap-->插件-->模态框

JS插件之模态框：

 <div class="modal " id="modals">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" >&times;</button><!--可以点击差号关掉弹出的模态框-->
                    <p>详细条款</p>
                </div>
                <div class="modal-body">
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                    <p>4</p>
                    <p></p>
                    <p>6</p>
                </div>
                <div class="modal-footer">
                    <button class="agree" type="button" data-dismiss="modal">同意</button>
                    <button class="cancel" type="button">取消</button>
                </div>
            </div>
        </div>
    </div>

以上这部分代码写的是一个模态框：

其中，在一个div中写modal类。

        再在该div内部写一个类为modal-dialog的div。

        继续在modal-dialog中写一个类为modal-content的div。

        接着在modal-content中写modal-header、modal-body、modal-footer

其中

 data-dismiss="modal"表示关闭

 <button class="close" data-dismiss="modal" >&times;</button><!--可以点击差号关掉弹出的模态框-->  这句话表示点击差号就可以直接关闭模态框，不需要用js就可以关闭

 不过，点击里面的同意按钮，也会关掉，这个用的就是【JS】知识了。取消还未给它设置功能，不过按照设置同意的方法设置就可以。其中设置同意的JS代码如下：

 $(function () {
            $('#modals').modal({
                show: false,
                keyboard: true,/*为true的时候，可以点击esc退出【但是你需要先点击以下取消或者确定】*/
                remote: false,
                backdrop: 'static'/*这个作用是使得弹出模态窗口以后，其余的颜色变暗，并且不能点击*/
            });

            $('#modals').on('show.bs.modal',function(obj){
                alert('我将要被展示啦！')
            })
            $('#modals').on('shown.bs.modal',function(obj){
                alert('我已经展示过啦！')
            })
            $('#modals').on('hide.bs.modal',function(obj){
                alert('我将要被隐藏起来了...')
            });
            $('#modals').on('hidden.bs.modal',function(obj){
                alert('我已经隐藏啦')
            })
        })

后面alert弹出内容那些是一些简单的设置，

$('#modals').on('show.bs.modal',function(obj){
                alert('我将要被展示啦！')
            })

                          这里的   show ：调用show方法之后立即触发该事件，就弹出窗口

                                  shown：此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。这些在bootstrap中都有

                                  hide ：调用hide方法之后立即触发该事件，就弹出窗口

                                  hidden：此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。