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 相关文章推荐
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
javascript的理解及经典案例分析
May 20 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python中的格式化输出用法总结
2016/07/28 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
详解Django配置优化方法
2019/11/18 Python
Python截图并保存的具体实例
2021/01/14 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
促销活动总结报告
2014/04/26 职场文书
党课心得体会范文
2014/09/09 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
python字符串常规操作大全
2021/05/02 Python
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android