全面解析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 日期分离成年月日的代码
May 14 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 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 基本语法格式
2009/12/15 PHP
php过滤敏感词的示例
2014/03/31 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
JS的数组迭代方法
2015/02/05 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python工厂函数用法实例分析
2018/05/14 Python
简单了解python代码优化小技巧
2019/07/08 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
增大python字体的方法步骤
2020/07/05 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
《分一分》教学反思
2014/04/13 职场文书
门店业绩提升方案
2014/06/08 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2015大学生实训报告
2014/11/05 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
Go归并排序算法的实现方法
2022/04/06 Golang
Python使用DFA算法过滤内容敏感词
2022/04/22 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server