Bootstrap3 模态框使用实例


Posted in Javascript onFebruary 22, 2017

不支持同时打开多个模态框

务必尽量将HTML代码放置在模态框的body位置以避免其他组件影响模态框

*autofocus 对于模态框无效, 需要自己调用 $('#myModal').on('shown.bs.modal', function () {
 $('#myInput').focus()
})*

实例

静态

<div class="modal fade" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
  <p>One fine body…</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
  </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

动态

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
  ...
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
  </div>
 </div>
 </div>
</div>

可选尺寸

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 <div class="modal-dialog modal-lg" role="document">
 <div class="modal-content">
  ...
 </div>
 </div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
 <div class="modal-dialog modal-sm" role="document">
 <div class="modal-content">
  ...
 </div>
 </div>
</div>

禁用fade

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
 ...
</div>

使用栅格系统

仅需在body中使用 .rows

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
  <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row">
   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
   <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
  </div>
  <div class="row">
   <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
  <div class="row">
   <div class="col-sm-9">
   Level 1: .col-sm-9
   <div class="row">
    <div class="col-xs-8 col-sm-6">
    Level 2: .col-xs-8 .col-sm-6
    </div>
    <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
    </div>
   </div>
   </div>
  </div>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
  </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

使用方法

通过data属性

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过JavaScript调用

$('#myModal').modal(options)

参数

名称 类型 默认值 描述
backdrop boolean 或 字符串 ‘static' true 设置为 static 时, 在点击屏幕时不会关闭
keyboard boolean true 键盘上的 esc 键被按下时关闭模态框
show boolean true 模态框初始化之后就立即显示出来

方法

模态框激活

.modal(options)
$('#myModal').modal({
 keyboard: false
})

模态框触发手动打开或者关闭

触发在 shown.bs.modal 以及 hidden.bs.modal 事件之前

.modal('toggle')

手动打开模态框

触发在 shown.bs.modal 之前

$('#myModal').modal('show')

手动隐藏模态框

触发在 hidden.bs.modal 之前

$('#myModal').modal('hide')

事件

按照时间先后顺序分别为 show.bs.modal shown.bs.modal hide.bs.modal  hidden.bs.modal

调用方式

$('#myModal').on('hidden.bs.modal', function (e) {
 // do something...
})

以上所述是小编给大家介绍的Bootstrap3 模态框使用实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
JavaScript基础之this详解
Jun 04 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
Bootstrap3下拉菜单的实现
Feb 22 #Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 #Javascript
js仿微博动态栏功能
Feb 22 #Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 #Javascript
svg动画之动态描边效果
Feb 22 #Javascript
jQuery实现的简单拖动层示例
Feb 22 #Javascript
Bootstrap 3 进度条的实现
Feb 22 #Javascript
You might like
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
JSON语法五大要素图文介绍
2012/12/04 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python字典的值可以修改吗
2020/06/29 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
大学生学业生涯规划
2014/01/05 职场文书
入党自我鉴定
2014/03/25 职场文书
安全生产演讲稿
2014/05/09 职场文书