bootstrap-模态框_jquery

先创建一个按钮

bootstrap-模态框_自定义_02

模态框

三层结构

三个块

bootstrap-模态框_三层结构_03
bootstrap-模态框_三层结构_04

header,头部
body,身体
footer,底部

bootstrap-模态框_点击事件_05

代码

bootstrap-模态框_jquery_06

效果

bootstrap-模态框_模态框_07

当前点击按钮没有效果。

下一步,让按钮与模态框关联起来

bootstrap-模态框_点击事件_08

点击按钮后的效果

bootstrap-模态框_jquery_09

点击取消就关闭

bootstrap-模态框_自定义_10
dissmiss,消失

bootstrap-模态框_模态框_11

点击取消,框就会消失的了

添加一个fade样式,让出现有淡淡的感觉

bootstrap-模态框_模态框_12

设置大中小三个模态框
bootstrap-模态框_自定义_13

bootstrap-模态框_自定义_14
定义大的框

bootstrap-模态框_jquery_15
注意,加的位置,加在modal-dialog这里

定义小的框
bootstrap-模态框_自定义_16

中等的模态框就不加

看效果

大的框

bootstrap-模态框_自定义_17

中的框

bootstrap-模态框_自定义_18

小的框

bootstrap-模态框_jquery_19

用js控制

写一个自定义的按钮事件

先来一个按钮

bootstrap-模态框_三层结构_20

再来jquery

先看结构

bootstrap-模态框_三层结构_21

jquery

按钮的点击事件,让对应的模态框显示
bootstrap-模态框_点击事件_22

效果

当前点击确定与取消是不能够有任何效果的

bootstrap-模态框_模态框_23

期望它的效果

先给个id,方便获取

bootstrap-模态框_模态框_24

然后继续写特效

bootstrap-模态框_jquery_25

当前效果,点击暗区也会隐藏,不期待这样的效果

bootstrap-模态框_jquery_26

解决办法

官方文档中

bootstrap-模态框_jquery_27

根据文档中的backdrop属性

bootstrap-模态框_三层结构_28
把原来modal方法传参做一个改变

原来传参一个字符串,改变为传参为字典