Modal 模态框

标签（空格分隔）： modal

---

什么叫做模态框

modal:

• adj.模态的；形态上的；情态的
• n.莫代尔（一种新型纤维素纤维）

模态对话框（Modal DialogueBox，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。

模态框分类

一般来说，Windows应用程序中，对话框分为模态对话框和非模态对话框两种。

区别

二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作。
模态对话框垄断了用户的输入。当一个模态对话框打开时，用户只能与该对话框进行交互，而其他用户界面对象收不到输入信息。模态对话框下，用户需要操作目标对话框就必须先操作模态对话框。 非模态对话框(Nonmodal DialogueBox，又叫做无模式对话框)，与模态对话框不同，当用户打开非模态对话框时，依然可以操作其他窗口。

总结

模态对话框：用户可以对其它对象进行操作，模态框打开时用户不可以操作其它窗口。
非模态对话框：用户只能与该对话框进行交互，当非模态对话框打开时，依然可以操作其它窗口。

modal在bootstrap中的样例：

   <!-- 模态框（Modal） -->
   <div class="modal">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close">×</button>
               <h4 class="modal-title">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">这里显示文本</div>
            <div class="modal-footer clearfix">
               <button type="button" class="btn btn-default">关闭</button>
               <button type="button" class="btn btn-primary">提交更改</button>
            </div>
         </div>
      </div>
   </div>
   <!-- /modal -->

显示结果：

此处输入图片的描述

bootstrap 中模态框布局结构：

• | modal
• | - modal-dialog
• | - | - modal-content
• | - | - | - modal-header
• | - | - | - modal-body
• | - | - | - modal-footer

bootstrap 中对于不同大小的模态框做了相关定义：

-lg:900px;
-md:600px;
-sm:300px;

代码	解释
div id="example"	分配给相关 div 的 id，id 的值指向后边要实现 modal（模态框）的 JavaScript。
class="modal hide fade in"	Bootstrap CSS 的四个 class - modal、hide、fade 和 in，用于设置 modal（模态框）的布局。
style="display: none;	用于保持模态窗口可见，直到触发器触发（比如点击相关按钮）。
div class="modal-header"	modal-header 适用于定义模态窗口标题样式的 class。
data-dismiss="modal"	data-dismiss 是一个定制的 HTML5 data 属性。用于关闭模态窗口。
class="modal-body"	modal-body 是 Bootstrap 的一个 CSS class，用于设置模态窗口主体的样式。
data-dismiss="modal"	HTML5 定制的 data 属性 data-dismiss，用于关闭模态窗口。
data-toggle="modal"	HTML5 定制的 data 属性 data-toggle，用于打开模态窗口。