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-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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函数
2006/10/09 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
Python实现多线程抓取妹子图
2015/08/08 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
管理学专业个人求职信范文
2013/12/13 职场文书
降消项目实施方案
2014/03/30 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
债务纠纷委托书
2014/08/30 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
《海上日出》教学反思
2016/02/23 职场文书
Python中的socket网络模块介绍
2022/07/23 Python