bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程

前面的话

在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。本文将详细介绍Bootstrap模态弹出框

结构分析

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

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

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

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

×Close

模态弹出窗标题

模态弹出窗主体内容

关闭保存

对于弹窗而言，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-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都是用来放置按钮，所以底部还对包含的按钮做了一定的样式处理.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;

}

触发方式

众所周知，模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作(事件)才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种

在介绍触发方式之前，首先要说明.show和.fade这两个方法。只有模态弹出窗默认是隐藏的，才能触发其显示.fade {opacity: 0;

-webkit-transition: opacity .15s linear;

-o-transition: opacity .15s linear;

transition: opacity .15s linear;

}.show {display: block!important;

}

【方法一】

模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss="")

data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；

data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值点击

×Close

模态弹出窗标题

模态弹出窗主体内容

关闭保存

【方法二】

触发模态弹出窗也可以是一个链接元素，那么可以使用链接元素自带的href属性替代data-target属性

不过建议还是使用统一使用data-target的方式来触发点击

×Close

模态弹出窗标题

模态弹出窗主体内容

关闭保存

尺寸

Bootstrap框架为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，另一个是小尺寸样式“modal-sm”。其结构上稍做调整

[注意].bs-example-modal-lg和.bs-example-modal-sm是自定义的名称，而非必须

...

...

大尺寸默认尺寸小尺寸

小火柴的蓝色理想

小火柴的蓝色理想

小火柴的蓝色理想

CSS解析

bootstrap中的“模态弹出框”有以下几个特点：

1、模态弹出窗是固定在浏览器中的。

2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。

3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px

4、模态弹出窗的背景常常有一个透明的蒙层效果

5、触发弹窗时，弹窗是从上到下、逐渐浮现到页面前的

【固定在浏览器实现】.modal {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 1050;

display: none;

overflow: hidden;

-webkit-overflow-scrolling: touch;

outline: 0;

}

【水平居中实现】.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,