【Bootstrap学习笔记】7.模态框插件

最新推荐文章于 2024-08-21 09:17:03 发布

sunraito

最新推荐文章于 2024-08-21 09:17:03 发布

阅读量794

点赞数 1

分类专栏： Bootstrap学习笔记(李炎恢版) 文章标签： bootstrap

本文链接：https://blog.csdn.net/sunraito/article/details/81913821

版权

Bootstrap学习笔记(李炎恢版) 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

十三、模态框插件

学习内容

模态框插件
模态框的大小
模态框淡入淡出效果
模态框用法说明(用法、参数、方法、事件)

● 模态框插件

1.交互网站非常常见的弹出窗插件
2.模态框的弹窗组件需要三层div容器，分别是modal(模态声明层)、dialog(窗口声明层)、content(内容层)。content里还包括三层，分别是header(头部)、body(主体)、footer(注脚)
步骤：
1.布置三层div容器(.modal .modal-dialog .modal-content)，给予div.modal一个id，例如“#myModal”
2.内容层中平行布置头、主体和脚(.modal-header .modal-body .modal-footer)
3.头部可以放置标题(.modal-title)和关闭按钮，关闭按钮注意data-dismiss="modal"属性。同时，如果div.modal同时设置了.show样式用于查看效果，关闭按钮是不可用的
4.弹出按钮注意data-toggle="modal"和data-target="#myModal"两个属性

<!--弹出按钮 注意两个data属性-->
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
    点击弹出模态框
</button>

<!--模态框声明 tabindex="-1"可直接用Esc键关闭弹窗-->
<div class="modal" id="myModal" tabindex="-1">
    <!--窗口声明-->
    <div class="modal-dialog">
        <!--内容层声明-->
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header">
                <!--注意data-dismiss属性，如果div.modal同时具有.show样式，关闭按钮则无效-->
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">
                    我是模态框标题
                </h4>
            </div>
            <!--主体-->
            <div class="modal-body">
                <p>我爱北京天安门</p>
            </div>
            <!--脚注-->
            <div class="modal-footer">
                <buttom class="btn btn-default">注册</buttom>
                <button class="btn btn-primary">登陆</button>
            </div>
        </div>
    </div>
</div>

这里写图片描述

注意，此时关闭弹窗的方式有三种
1.button.close按钮关闭，注意data-dismiss="modal"属性
2.点击灰色空白区域可关闭
3.按tab键使模态框获取焦点，再单击Esc键可关闭
给div.modal增加属性tabindex="-1"，就不用先tab获取焦点，可直接Esc关闭

疑问：
为什么给div.modal设置tabindex="1"后，tab键就无法切换了，但设置成“-1”就可以。

模态框的大小

除了默认大小外，还有两种尺寸
1.div.modal-dialog.modal-lg
2.div.modal-dialog.modal-sm

模态框淡入淡出效果

div.modal.fade

模态框主体部分使用栅栏系统中的流体(.container-fluid)

<!--弹出按钮 注意两个data属性-->
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
    点击弹出模态框
</button>


<!--模态框声明-->
<div class="modal fade" id="myModal" tabindex="1">
    <!--窗口声明-->
    <div class="modal-dialog">
        <!--内容层声明-->
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header">
                <!--注意data-dismiss属性，如果div.modal同时具有.show样式，关闭按钮则无效-->
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">
                    我是模态框标题
                </h4>
            </div>
            <!--主体-->
            <div class="modal-body">
                <!--主体部分使用栅栏系统中的流体-->
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">
                            1
                        </div>
                        <div class="col-md-4">
                            2
                        </div>
                        <div class="col-md-4">
                            3
                        </div>
                    </div>
                </div>
            </div>
            <!--脚注-->
            <div class="modal-footer">
                <buttom class="btn btn-default">注册</buttom>
                <button class="btn btn-primary">登陆</button>
            </div>
        </div>
    </div>
</div>

这里写图片描述

模态框用法说明(用法、参数、方法、事件)

所有的插件都是基于JavaScript和jQuery的。那么就包含四个要素：用法、参数、方法、事件
1.用法
第一种：上例中的通过button的data属性data-toggle="modal"和data-target="#myModal"
如果不是使用button，而是用 a，那么也可以用href="#myModal"代替data-target，但一般不建议使用a
2.参数
除了以上两种常用data属性，还有以下属性：
(1)data-backdrop
a.默认为true，背景黑灰遮罩，且单击黑灰背景可关闭弹窗
b.false，无背景效果，且单击背景无动作
c.static，背景黑灰遮罩，但单击背景无动作
(2)data-keyboard：默认true，按Esc可关闭弹窗；false反之
(3)data-show：用处不大，显示或不显示
(4)href
a.可代替data-target，指向一个id，如href="#myModal"
b.也可以是外部url地址，如href="modalContent.html"，加载到.modal-content容器内

<!--modalContent.html-->
<!--头部-->
<div class="modal-header">
    <button class="close" data-dismiss="modal"><span>&times;</span></button>
    <h4 class="modal-title">
        我是外部url
    </h4>
</div>
<!--主体-->
<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                a
            </div>
            <div class="col-md-4">
                b
            </div>
            <div class="col-md-4">
                c
            </div>
        </div>
    </div>
</div>
<!--脚注-->
<div class="modal-footer">
    <buttom class="btn btn-default">注册</buttom>
    <button class="btn btn-primary">登陆</button>
</div>

<!--index.html-->
<!--注意href，下面的模态框不会加载123，而是modalContent.html中的abc-->
<button class="btn btn-info btn-lg" id="btn" data-toggle="modal" data-target="#myModal" href="modalContent.html">
    点击弹出模态框
</button>

<!--模态框声明-->
<div class="modal fade" id="myModal" tabindex="1">
    <!--窗口声明-->
    <div class="modal-dialog">
        <!--内容层声明-->
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header">
                <!--注意data-dismiss属性，如果div.modal同时具有.show样式，关闭按钮则无效-->
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">
                    我是模态框标题
                </h4>
            </div>
            <!--主体-->
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">
                            1
                        </div>
                        <div class="col-md-4">
                            2
                        </div>
                        <div class="col-md-4">
                            3
                        </div>
                    </div>
                </div>
            </div>
            <!--脚注-->
            <div class="modal-footer">
                <buttom class="btn btn-default">注册</buttom>
                <button class="btn btn-primary">登陆</button>
            </div>
        </div>
    </div>
</div>

这里写图片描述

接上文
直接用JQuery方式声明，参数名略有不同，分别是：
backdrop; keyboard; show; remote，效果一致

<script> 
//JQuery方式初始化声明模态框插件
全部以默认参数加载，默认show为true
//$('#mymodal').modal();

//以自定义方式设置参数
$('#myModal').modal({
    backdrop:false,
    keyboard:false,
    show:true,
    remote:'modalContent.html',
});        
</script>

这里写图片描述

接上文
3.方法
第一种常用，后两种不常用
(1)$('#myModal').modal('show') 显示弹窗
(2)$('#myModal').modal('toggle') 反转切换弹窗
(3)$('#myModal').modal('hide') 关闭弹窗

<script>
//按钮触发模态框反转切换方法
$('#btn1').on('click',function(){
    //alert(1);
    $('#myModal').modal('toggle');
});
</script>

接上文
4.事件
(1) show.bs.modal show时触发
(2) shown.bs.modal show结束触发
(3) hide.bs.modal hide时触发
(4) hidden.bs.modal hide结束触发
(5) loaded.bs.modal 远程加载时触发。远程页面不是点击加载的，而是在页面第一次加载时就已经加载了远程页面，所以页面第一次加载时也会触发这个事件

<script>
    $('#myModal').modal({
        show:false,
        remote:'modalContent.html',
    });


    $('#myModal').on('show.bs.modal',function(){
        alert("show ing");
    });

    $('#myModal').on('shown.bs.modal',function(){
        alert("show end");
    });

    $('#myModal').on('hide.bs.modal',function(){
        alert("hide ing");
    });

    $('#myModal').on('hidden.bs.modal',function(){
        alert("hide end");
    });

    //仅当远程加载时才会触发，用href或者remote，页面首次加载时就会触发这个事件
    $('#myModal').on('loaded.bs.modal',function(){
        alert("loaded ing");
    });
</script>