BootStrap modal模态弹窗使用小结


Posted in Javascript onOctober 26, 2016

模态弹窗

触发元素基本结构:

<button class="btn btn-success" data-target="#modal" data-toggle="modal">modal</button>

内容元素基本结构:

<div class="modal fade" id="modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button class="close" data-dismiss="modal">×</button>
 title
 </div>
 <div class="modal-body">
 this is main content
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal">cancel</button>
 <button class="btn btn-success">ok</button>
 </div>
 </div>
 </div>
 </div>

触发元素的关键属性为data-target和data-toggle,data-target和具体的弹窗互相对应,data-toggle="modal"提供了HTML触发条件

弹窗内容要正确嵌套,弹窗的出现和隐藏的动画要设置在最外层

可以通过modal-sm和modal-lg改变弹窗的大小,这两个class要设置在modal-dialog那一层

modal-header中的关闭按钮的关键属性为class="close"该class实现了样式的改变,data-dismiss="modal"提供了HTML关闭的触发条件

模态弹窗提供了四个属性,这四个属性通常设置在模态弹窗上class="modal"那一层(内容DOM的最外层),四个属性分别为:

1.data-backdrop:是否包含一个背景,默认值为true同时单击背景可以关闭模态窗,设置为data-backdrop="static"则单击背景时不关闭,设置为backdrop="false"则不存在背景

2.data-keyboard:按下ESC时是否关闭模态窗默认值为true即按下时关闭模态窗,设置为data-keyboard="false"则在点击ESC时不再关闭模态窗(该属性要想生效要在最外层设置属性tabindex)

3.data-show:初始化时是否显示默认值为true即初始时显示,data-show="false"则初始化时不显示第一次点击触发元素准备模态窗,在点击一次开始显示模态窗

4.href:加载其他内容

JS使用方法

模态窗提供了四个事件:

1.show.bs.modal在显示之前触发

2.shown.bs.modal在显示之后触发

3.hide.bs.modal在隐藏之前触发

4.hidden.bs.modal在隐藏之后触发

使用方式为:

$("#modal").on("shown.bs.modal",function(){
 alert("already show")
})

如果我们在模态窗中使用了input表单元素,如果需要在每次显示模态窗是input可以获取焦点,就需要使用shown.bs.modal了

模态弹窗也提供勒三个参数:

1.toggle切换模态窗的显示隐藏

2.show显示模态窗

3.hide隐藏模态窗

使用方式为:

$("#modal").modal("show")

模态窗提供的四个属性同样可以通过JS方式来使用,用JS使用时四个属性分别为:backdrop、keyboard、show、remote

使用方式为:

$("#modal").modal({
 backdrop:"static",
 keyboard:false,
 show:false
})

更多内容请点击专题《Bootstrap Modal使用教程》进行学习,希望大家喜欢。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
告诉大家什么是JSON
Jun 10 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
js变换显示图片的实例
Apr 16 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
使用Vue生成动态表单
Nov 26 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 #Javascript
BootStrap tooltip提示框使用小结
Oct 26 #Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 #Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 #Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 #Javascript
Bootstrap 实现查询的完美方法
Oct 26 #Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 #Javascript
You might like
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
document.write的几点使用心得
2014/05/14 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python flask中动态URL规则详解
2019/11/22 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
国培远程培训感言
2014/03/08 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
Python自动化实战之接口请求的实现
2022/05/30 Python