bootstrap 彈窗默認打開_Bootstrap 手册 07 - JS 组件篇

1. 动画过渡 Transition

Bootstrap 对一些组件默认使用过渡动画效果，这种效果是由 CSS3 实现，故不支持 IE 6-8。

模态弹窗 (Modal) 的滑动和渐变效果；

选项卡 (Tab) 的渐变效果；

警告框 (Alert) 的渐变效果；

图片轮播 (Carousel) 的滑动效果；

2. 模态弹窗 Modal

Bootstrap 模态弹窗通常有以下表现——

点击某按钮后弹窗，弹窗内容为文件描述、图片等，也可带有按钮操作；

模态弹窗固定在浏览器中；

模态弹窗宽度自适应，且 .modal-dialog 水平居中；

当渲染视界宽度大于 768px 时，模态弹出窗的宽度为 600px；

窗体弹出时，底部有一层透明的黑色蒙版效果；

.modal>.modal-dialog>.modal-content>(.modal-header+.modal-body+.modal-footer)

2.1. 弹窗结构

模态弹窗的真正内容都放置在 .modal-content 中，其主要设置了弹窗的边框、边距、背景色和阴影等样式。包括三个部分——

弹出框头部 .modal-header：主要包括标题和关闭按钮；

弹出框主体 .modal-body：弹出框的主要内容；

弹出框脚部 .modal-footer：主要放置操作按钮；

其中，.modal-footer 通常用来放置按钮，已对其包含的按钮做了一定的样式处理。

2.2. 弹窗尺寸

.modal-dialog.modal-lg；

.modal-dialog.modal-sm；

2.3. 弹窗动画

.modal.fade 模态弹窗将有一个过渡动画效果；

2.4. 弹窗触发

1) 通过属性触发弹窗

为触发按钮设置 [data-toggle="modal" data-target]；

其中 data-target 属性指定为模态弹窗 .modal 的 ID 或者 CSS 选择符；

若使用 a 元素作为触发模态弹窗的按钮，则可用 href 属性替代 data-target；

弹窗属性触发 data- 参数设置一览表

2) 通过 JS 触发弹窗

a. 属性设置

弹窗 JS 触发属性一览表

示例：

$(function(){

$('.btn').click(function () {

$('#mymodal‘’).modal({

keyboard: false

});

});

});

b. 参数设置

参数

使用方法

描述

toggle

$('#mymodal').modal('toggle')

触发时，反转模态弹窗的状态。若模态弹窗显示，则关闭；反之则显示

show

$('#mymodal').modal('show')

触发时，显示模态弹窗

hide

$('#mymodal').modal('hide')

触发时，关闭模态弹窗

c. 事件设置

事件类型

描述

show.bs.modal

在 show 方法调用时立即触发(尚未显示之前)；如果单击了一个元素，那么该元素将作为事件的 relatedTarget 属性

shown.bs.modal

该事件在模态弹窗完全显示后(并且等 CSS 动画完成之后)触发；如果单击了一个元素，那么该元素将作为 relatedTarget 事件

hide.bs.modal

在 hide 方法调用时(但还未关闭隐藏)立即触发

hidden.bs.modal

该事件在模态弹窗完全关闭后(并且 CSS 动画完成之后)触发