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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
检查php文件中是否含有bom的函数
2012/05/31 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
初步讲解Python中的元组概念
2015/05/21 Python
Python中super的用法实例
2015/05/28 Python
python实现简单socket通信的方法
2016/04/19 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
数控专业个人求职信范例
2013/11/29 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python