【Bootstrap学习笔记】7.模态框插件
十三、模态框插件
学习内容
- 模态框插件
- 模态框的大小
- 模态框淡入淡出效果
- 模态框用法说明(用法、参数、方法、事件)
● 模态框插件
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"两个属性
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
点击弹出模态框
button>
<div class="modal" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×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)
<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">
<button class="close" data-dismiss="modal"><span>×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容器内
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×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>
<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">
<button class="close" data-dismiss="modal"><span>×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.modalshow时触发
(2)shown.bs.modalshow结束触发
(3)hide.bs.modalhide时触发
(4)hidden.bs.modalhide结束触发
(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>
