一.基本使用
使用模态框的弹窗组件需要三层div容器元素,分别为modal(模态声明层)、dialog(窗口声明层)、content(内容层)。在内容层里面,还有三层,分别为header(头部)、body(主体)、footer(注脚)。
//基本实例
<!-- 模态框声明 -->
<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">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>
如果想让模态框自动隐藏,然后通过点击按钮弹窗,那么需要做如下操作。
//模态框去掉show,增加一个id
<div class="modal"id="myModal">
//点击触发模态框显示
<button class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal">点击弹窗
</button>
//弹窗的大小有三种,默认情况下是正常,还有lg(大)和sm(小)
<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
//可设置淡入淡出效果
<div class="modalfade" id="myModal">
//在主体部分使用栅格系统中的流体
<!--主体-->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
<div class="col-md-4">1</div>
</div>
</div>
</div>
二.用法说明
基本使用介绍结束之后,我们就来看下插件的各种重要用法。所有的插件,都是基于JavaScript/jQuery的。那么,就有四个要素:用法、参数、方法和事件。
- 用法
第一种:可以通过data属性
//data-toggle
data-toggle="modal" data-target="#myModal"
data-toggle表示触发类型
data-target表示触发的节点
如果不是使用<button>,而是<a>,其中data-target也可以使用href="#myModal"取代。当然,我们建议使用data-target。除了data-toggle和data-target两个声明属性外,还有一些可以用选项。
- 参数
可以通过在HTML元素上设置data-*的属性声明来控制效果。
data-backdrop
默认值true,表示背景存在黑灰透明遮罩,且单击空白背景可关闭弹窗;如果为false,表示背景不存在黑灰透明遮罩,且点击空白背景不可关闭弹窗;如果是字符串'static',表示背景存在黑灰透明遮罩,且点击空白不可关闭弹窗。
data-keyboard
默认值true
如果是true,按esc键会关闭窗口;如果是false,按esc键会不会关闭。
data-show
默认值true
如果是true,初始化时,默认显示;如果是false,初始化时,默认隐藏。
Href
默认值空值
如果值不是以#号开头,则表示一个url地址,加载url内容到modal-content容器里,并只加载一次。如果是#号,就是取代data-target的方法。
//空白背景且点击不关闭
data-backdrop="false"
//按下esc不关闭
data-keyboard="false"
//初始化隐藏,如果是按钮点击触发,第一次点击则无法显示,第二次显示。data-show="false"
//加载一次index.html到容器内
href="index.html"
当然,也可以在JavaScript直接设置。
Backdrop
默认值true,表示背景存在黑灰透明遮罩,且单击空白背景可关闭弹窗;如果为false,表示背景不存在黑灰透明遮罩,且点击空白背景不可关闭弹窗;如果是字符串'static',表示背景存在黑灰透明遮罩,且点击空白不可关闭弹窗。
keyboard默认值true,如果是true,按esc键会关闭窗口;如果是false,按esc键会不会关闭。
show默认值true,如果是true,初始化时,默认显示;如果是false,初始化时,默认隐藏。
remoteurl默认值空值,路径空值远程获取指定内容填充到modal-content容器内。//通过jQuery方式声明
$('#myModal').modal({
show:true,
backdrop:false,
keyboard:false,
remote:'index.html',
});
- 方法
如果说,默认不显示弹窗,那么怎么才能通过点击前后弹窗呢?
toggle .modal('toggle');触发时,反转切换弹窗状态
show .modal('show');触发时,显示弹窗
hide .modal('hide');触发时,关闭弹窗
//点击显示弹窗
$('#btn').on('click',function(){
$('#myModal').modal('show');
});
- 事件模态框支持4种时间,分别对应弹出前、弹出后、关闭前和关闭后。
show.bs.modal在show方法调用时立即触发。
shown.bs.modal在模态框完全显示出来,并且等CSS动画完成之后触发。hide.bs.modal在hide方法调用时,但还未关闭隐藏时触发。
hidden.bs.modal在模态框完全隐藏之后,并且等CSS动画完成之后触发。$('#myModal').on('show.bs.modal',function(){
alert('在show方法调用时立即触发!');
});
$('#myModal').on('shown.bs.modal',function(){
alert('在模态框显示完毕后触发!');
});
$('#myModal').on('hide.bs.modal',function(){
alert('在hide方法调用时立即触发!');
});
$('#myModal').on('hiden.bs.modal',function(){
alert('在模态框显示完毕后触发!');
});
$('#myModal').on('loaded.bs.modal',function(){
alert('远程数据加载完毕后触发!');
});