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 Ajax文件上传(php)
Jun 16 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 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
php 清除网页病毒的方法
2008/12/05 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
JQuery live函数
2010/12/24 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
RequireJs的使用详解
2017/02/19 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
JavaScript运动原理基础知识详解
2020/04/02 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
深入理解python try异常处理机制
2016/06/01 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
django中间键重定向实例方法
2019/11/10 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
高中军训感言600字
2014/03/11 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
2015年元旦标语大全
2014/12/09 职场文书
公司规章制度范本
2015/08/03 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript