全面解析Bootstrap弹窗的实现方法


Posted in Javascript onDecember 01, 2015

一. 结构分析 

Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:

☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮

☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容

☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮

<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

二 . data-toggle类触发弹窗(无需写JS)

1 . 模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target.

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div>
 </div>
</div>

全面解析Bootstrap弹窗的实现方法 

2 . data-参数说明

除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗。

全面解析Bootstrap弹窗的实现方法

 三 . JS触发弹窗(要写JS)

1 . 除了使用自定义属性触发模态弹出框之外,还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件,来触发。比如说给一个按钮一个单击事件,然后触发模态弹出窗。

HTML:

<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS:

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });

2 . 使用JavaScript触发模态弹出窗时,Bootstrap框架提供了一些设置,主要包括

属性设置:

全面解析Bootstrap弹窗的实现方法

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal({
 keyboard:false
 });
 });
});

参数设置:

全面解析Bootstrap弹窗的实现方法

 事件设置:

全面解析Bootstrap弹窗的实现方法

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})

四 . 弹窗尺寸

Bootstrap框架还为模态弹出窗提供了不同尺寸.

一个是大尺寸样式"modal-lg”.

<divclass="modal-dialog modal-lg">
 <divclass="modal-content"> ... </div>
</div>

另一个是小尺寸样式"modal-sm”.

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>

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

以上就是关于Bootstrap弹窗的实现方法的全部介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
用js实现in_array的方法
Nov 05 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
js获取及判断键盘按键的方法
Dec 01 #Javascript
Eclipse引入jquery报错如何解决
Dec 01 #Javascript
JS验证邮件地址格式方法小结
Dec 01 #Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 #Javascript
常见JS验证脚本汇总
Dec 01 #Javascript
详解JavaScript函数
Dec 01 #Javascript
javascript定义类和类的实现实例详解
Dec 01 #Javascript
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
Javascript学习指南
2014/12/01 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
Flask实现跨域请求的处理方法
2018/09/27 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
python列表的逆序遍历实现
2020/04/20 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
大学生毕业鉴定
2014/01/31 职场文书
司马光教学反思
2014/02/01 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
党支部特色活动方案
2014/08/20 职场文书
苏州园林导游词
2015/02/03 职场文书
趣味运动会加油词
2015/07/18 职场文书