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

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

模态弹出框的结构

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

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

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

模态弹出框的实现原理

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

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

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

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

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

声明式触发模态弹出窗

使用button触发

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

使用a标签触发

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

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

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

JavaScript代码式触发模态弹出框

例如：

然后添加Javascript代码：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!