Bootstrap模态框Modal插件

前提是要引入bootstrap.min.js

模态框

（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

使用步骤

1.先定义一个按钮 data-toggle：以什么事件触发，如modal,popover,tooltips等； data-target：事件的目标；

<button type="button"  data-toggle="modal" data-target="#modal">打开</button> 

2.定义事件的目标 即data-target的属性值 上面是#modal 那就是id="modal"的元素

<div  tabindex="-1" role="dialog" id="modal">
　　.......内容
</div>

3.data-dismiss="modal"个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口

<button type="button"  data-dismiss="modal">关闭</button>

tabindex属性：

html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。
把控件的tabIndex属性设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。
这样，当浏览者使用TAB键在网页控件中移动时，将首先移动到具有最小tabIndex属性值的控件上，最后在具有最大tabIndex属性值的控件上结束移动。
如果有两个控件的tabIndex属性相同，则以控件在html代码中出现的顺序为准。
默认的tabIndex属性为 0 ，将排列在在所有指定tabIndex的控件之后。

role属性：

html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。
role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button

比如，

<div role="checkbox" aria-checked="checked"></div>
辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。