Boostrap模态窗口的学习小结_javascript技巧

一．什么是模态窗口？

是这样一种效果哟：

二． 组成

头部（包括标题和关闭按钮）

中间（主要内容）

底部（主要是放置操作按钮）

对应在html代码中的布局是：使用div容器元素，分别使用modal,modal-dialog,modal-cotent样式，而在modal-content内包含弹窗的header,body,footer,分别使用三个样式：modal-header,modal-body,modal-footer，如下图：

三，实现代码

单击弹出模态窗口 -->
单击弹出模态窗口






× Close

登录系统 


弹窗里的具体内容,hhh ajbh 

 
登录
取消

四。Js 中的使用：

（1）声明式语法

data-toggle,data-target,给触发元素上设置，data-toggle的值必须为modal ，dat-target的值是：css选择符

（2）javascript用法：

1）使用属性控制：backdrop 布尔值 值为true,则单击背景（不包括弹窗本身）时，关闭弹窗，否则，反之。

2）使用参数控制：toggle $(“#mymodal”).modal(“toggle”)，触发时，反弹窗口的状态，

Show $(“#mymodal”).modal(“show”),触发时，显示弹窗
Hide $(“#mymodal”).modal(“hide”),触发时，关闭

3）使用方法控制：

关于Boostrap模态窗口的学习小结，小编就给大家介绍到这里，希望对大家有所帮助！