模态框总结

Bootstrap基于模态框的学习笔记：

概括：

模态对话框（Modal Dialogue Box），是指除非采取有效的关闭手段，否则用户鼠标点或者输入 光标一直停留在其上的对话框。

非模态类型对话框：不会强制此特性，用户可以在当前对话框以及其他敞口间进行切换。

总之就是如果打开的是模态窗口，那么你就只能对当前此窗口进行操作，而普通窗口则可以进行任意切换。

bootstrap的一个模态框分四层

<div class = “modal fade”>

<div class = “modal-dialog”>

<div class = “modal-content”>

<div class = “modal-title”>   //模态框头部样式

<div class = “modal-body”> //模态框主体样式

<div class = “modal-footer”> //模态框底部样式

模态框的class名固定，通过定义data-toggle和data-target来进行模态框的跳转

     模态框与事件绑定，当触发一定条件时，执行自定义事件

1. data-toggle 标签与 data-target标签的区别

data-toggle是触发器，表示触发一个模态框

data-target制定要触发的模态框，通常用模态框定义的ID

2.input和textarea的区别:

前者是单行文本，后者是多行文本

3.属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止 

4.事件

事件：                                              描述：               

show.bs.modal                     在调用 show 方法后触发。

shown.bs.modal                   当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

hide.bs.modal                      当调用 hide 实例方法时触发。

hidden.bs.modal                  当模态框完全对用户隐藏时触发。

  5.modal 与 fade

 <class="modal fade > ，modal标识该<div>为模态框。fad作为用当模态框被切换时，引起内容淡入淡出。

6.aria-lable 与 aria-labelledby

aria-lable: 当input组件获取到焦点时，读取出相应的label里的文本

• aria-labelledby：当想要的标签文本已在其他元素中存在时，可以使用该属性并将其值为读取元素的id。
• 7.data-dismiss
• 标识该组件作用为关闭模态框
•  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
•