全面解析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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
微信小程序入门教程
Nov 18 Javascript
vue mounted组件的使用
Jun 18 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
基于vue实现简易打地鼠游戏
Aug 21 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
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
PHP如何编写易读的代码
2007/07/10 PHP
php多文件上传下载示例分享
2014/02/20 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP Include文件实例讲解
2019/02/15 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python如何爬取动态网站
2020/09/09 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
python lambda的使用详解
2021/02/26 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
会计找工作求职信范文
2013/12/09 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
治安消防安全责任书
2014/07/23 职场文书
工程安全生产协议书
2014/11/21 职场文书
关于感恩的作文
2019/08/26 职场文书
python基础之while循环语句的使用
2021/04/20 Python