Bootstrap源码解读模态弹出框（11）

模态弹出框依赖于Bootstrap提供的js文件，可以单独引入modal.js，也可以直接引入bootstrap.js。

模态弹出框的结构

Bootstrap框架中的模态弹出框，使用了“modal”、“modal-dialog”和“modal-content”样式。
“modal-content”中是弹出窗真正的内容，主要包括三个部分：
弹出框头部，使用“modal-header”，主要包括标题和关闭按钮
弹出框主体，使用“modal-body”，弹出框的主要内容
弹出框脚部，使用“modal-footer”，主要放置操作按钮
例如：

<div class="modal show">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</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>

模态弹出窗样式的关键是modal-content。modal-content主要设置了弹出窗的边框、边距、背景色和阴影，实现源码如下：

.modal-content {
 position: relative;
 background-color: #fff;
 -webkit-background-clip: padding-box;
   background-clip: padding-box;
 border: 1px solid #999;
 border: 1px solid rgba(0, 0, 0, .2);
 border-radius: 6px;
 outline: 0;
 -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
   box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

modal-content中有modal-header、modal-body和modal-footer，主要是控制一些间距的样式。modal-footer一般是用来放置按钮，所以底部还对包含的按钮做了一定的样式处理。实现源码如下：

.modal-header {
 min-height: 16.42857143px;
 padding: 15px;
 border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
 margin-top: -2px;
}
.modal-title {
 margin: 0;
 line-height: 1.42857143;
}
.modal-body {
 position: relative;
 padding: 15px;
}
.modal-footer {
 padding: 15px;
 text-align: right;
 border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
 margin-bottom: 0;
 margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
 margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
 margin-left: 0;
}

模态弹出框的实现原理

模态弹出窗是固定在浏览器中的
实现源码如下：

.modal {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1040;
 display: none;
 overflow: hidden;
 -webkit-overflow-scrolling: touch;
 outline: 0;
}

在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。实现源码如下：

.modal-dialog {
 position: relative;
 width: auto;
 margin: 10px;
}

当浏览器视窗大于768px时，模态弹出窗的宽度为600px。实现源码如下：

@media (min-width: 768px) {
 .modal-dialog {
 width: 600px;
 margin: 30px auto;
 }
 .modal-content {
 -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
   box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
 }
 .modal-sm {
 width: 300px;
 }
}

模态弹出窗底部有一个透明的黑色蒙层效果，实现源码如下：

.modal-backdrop {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: #000;
}

它有一个过渡动画，从fade到in，把opacity值从0变成了0.5。实现源码如下：

.modal-backdrop.fade {
 filter: alpha(opacity=0);
 opacity: 0;
}
.modal-backdrop.in {
 filter: alpha(opacity=50);
 opacity: .5;
}

声明式触发模态弹出窗

使用button触发

需要使用两个属性：data-toggle和data-target。data-toggle必须设置为modal；data-target一般情况设置为模态弹出窗的ID值。例如：

<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">触发模态弹出窗</button>
<div class="modal" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <!-- 模态弹出窗内容 -->
  </div>
 </div>
</div>

使用a标签触发

链接元素自带的href属性可以替代data-target属性，例如：

<a data-toggle="modal" href="#mymodal" class="btn btn-primary" >触发模态弹出窗</a>
<div class="modal" id="mymodal" >
 <div class="modal-dialog" >
  <div class="modal-content" >
   <!-- 模态弹出窗内容 -->
  </div>
 </div>
</div>

为弹出框增加过度动画效果

给“.modal”增加类名“fade”即可。
实现源码如下：

.modal.fade .modal-dialog {
 -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition:  -o-transform .3s ease-out;
   transition:   transform .3s ease-out;
 -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
   transform: translate(0, -25%);
}
.modal.in .modal-dialog {
 -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
   transform: translate(0, 0);
}

JavaScript代码式触发模态弹出框

例如：

<button type="button" class="btn btn-primary" id="mybtn">触发模态弹出窗</button>
<div class="modal" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <!-- 模态弹出窗内容 -->
  </div>
 </div>
</div>

然后添加Javascript代码：

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

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap模态弹出框  # Bootstrap弹出框  # bootstrap modal弹出框的垂直居中  # Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法  # Bootstrap实现带动画过渡的弹出框  # Bootstrap教程JS插件弹出框学习笔记分享  # 简介BootStrap model弹出框的使用  # JS组件Bootstrap实现弹出框效果代码  # Bootstrap每天必学之弹出框（Popover）插件  # BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法  # 关于Bootstrap弹出框无法调用问题的解决办法  # JS组件Bootstrap实现弹出框和提示框效果代码  # 弹出  # 模态  # 窗内  # 设置为  # 主要包括  # 有一个  # 中有  # 可以直接  # 主要内容  # 自带  # 全屏  # 还对  # 大家多多  # 自适应  # 背景色  # 主要是  # 脚部  # 变成了  # 器中  # 使用了 

相关文章： 建站之星展会模板：智能建站与自助搭建高效解决方案  武汉网站制作费用多少,在武汉武昌，建面100平方左右的房子，想装暖气片，费用大概是多少啊？  如何在局域网内绑定自建网站域名？  如何快速搭建高效服务器建站系统？  nginx修改上传文件大小限制的方法  如何用PHP快速搭建CMS系统？  大同网页,大同瑞慈医院官网？  建站OpenVZ教程与优化策略：配置指南与性能提升  建站主机与虚拟主机有何区别？如何选择最优方案？  如何在Tomcat中配置并部署网站项目？  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  如何在阿里云ECS服务器部署织梦CMS网站？  如何通过NAT技术实现内网高效建站？  行程制作网站有哪些,第三方机票电子行程单怎么开？  宁波自助建站系统如何快速打造专业企业网站？  公司网站设计制作厂家,怎么创建自己的一个网站？  教学论文网站制作软件有哪些,写论文用什么软件 ？  成都网站制作价格表,现在成都广电的单独网络宽带有多少的，资费是什么情况呢？  广州商城建站系统开发成本与周期如何控制？  如何注册花生壳免费域名并搭建个人网站？  重庆网站制作公司哪家好,重庆中考招生办官方网站？  如何有效防御Web建站篡改攻击？  TestNG的testng.xml配置文件怎么写  如何快速使用云服务器搭建个人网站？  如何续费美橙建站之星域名及服务？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  如何确保FTP站点访问权限与数据传输安全？  如何用好域名打造高点击率的自主建站？  Python文件管理规范_工程实践说明【指导】  如何通过虚拟主机空间快速建站？  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  微信网站制作公司有哪些,民生银行办理公司开户怎么在微信网页上查询进度？  如何用低价快速搭建高质量网站？  如何选择高效稳定的ISP建站解决方案？  定制建站模板如何实现SEO优化与智能系统配置？18字教程  可靠的网站设计制作软件,做网站设计需要什么样的电脑配置？  网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？  重庆市网站制作公司,重庆招聘网站哪个好？  如何用IIS7快速搭建并优化网站站点？  如何访问已购建站主机并解决登录问题？  建站之星如何取消后台验证码生成？  怎么将XML数据可视化 D3.js加载XML  建站之星后台管理如何实现高效配置？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  南平网站制作公司,2025年南平市事业单位报名时间？  建站主机解析：虚拟主机配置与服务器选择指南  如何用5美元大硬盘VPS安全高效搭建个人网站？  广德云建站网站建设方案与建站流程优化指南  宝塔新建站点为何无法访问？如何排查？  教程网站设计制作软件,怎么创建自己的一个网站？