Bootstrap - 弹出框制作

弹出框（模态框）Modal.
弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单等内容。

图片.png

代码：

  

    

      

        ×
        
Modal title
      
      

        
One fine body…
      
      

        Close
        Save changes
      
    

  

解析：
弹出框可以分为三部分：
1）弹出框头部
2）弹出框主体
3）弹出框脚部

这个是弹出框的包裹，只有包裹这三层才能是一个弹出框：

然后是模态框头部：

然后是模态框主体：

然后是尾部：

---

弹出框一般放在元素中，一般都是放在上面。

尾部中如果一个按钮有data-dismiss="modal"属性，那么它就是可以关闭的：

Close

data-toggle与data-target

data-toggle + data-target
data-toggle:数据关联
data-target:数据目标 （关联到 #id 去）
组合在一起，可以是一个事件。

使用方式:

关于
....

    

注意：上面的data-toggle="modal"与data-target="#about"， data-target指向的是id，我们可以看到id。