在页面中启用模态框

在页面中需要弹出窗口页面时，除了常用的alert弹出框，使用起来更灵活的是模态框。

所谓模态框（Modal）就是覆盖在父窗体上的子窗体，或者说是一个定位于视区中的覆盖层或悬浮窗口。这里主要引入一下jQuery UI中的Dialog对话框，以及Bootstrap中的模态框Modal。

一、Dialog

• 出现方式：

在自定义的位置出现，包括一个标题栏和内容区。对话窗口可以移动、重新调整大小、使用默认或者自定义方式关闭。在定义窗口高度的情况下，如果内容长度大于这个数，会自动出现滚动条。

• 使用方法：

$("#dialogElement").dialog(options);

options：

• autoOpen    值：true/false
• height          值：Integer
• width            值：Integer
• modal           值：true/false，是否启用模态框属性。模态框防止用户与对话框之外的页面其他部分进行交互，直到对话框关闭为止。
• buttons        值：{buttonName:function(){}}，不同按钮之间用 ',' 隔开
• close            值：function(){}，对话框关闭时触发的事件
• dialogClass  值：定义的css样式名。//偶然见过，主要目的是改变对话框样式。但还未在示例中使用和验证过。

控制打开或关闭：

$("#dialogElement").dialog("open"); / $("#dialogElement").dialog("close");

• 注意事项：

Dialog的焦点是个容易被忽略的问题，我也是偶然发现关闭按钮的地方常显提示close，发现在内容区的元素里加入autofocus也无效，故此再次特意记录一下。

当打开一个对话框时，焦点会自动移动到满足下面条件的第一项：

1. 带有autofocus属性发对话框内的第一个元素
2. 对话框内容内的第一个 :tabbable元素
3. 对话框按钮面板内的第一个 :tabbable元素
4. 对话框的关闭按钮

但是在实际情况中发现，以上情况是针对提前把dialog内容定义好的情况。例如在js中异步加载内容区内容的话，则可能并不会将焦点移动到符合上述条件的元素上。

二、Modal

• 出现方式

以模态框的形式出现在定义好的位置（默认出现在页面顶部），模态框内部内容全由自己控制。同时，有一些现成的css可以使用。

• 使用方法

$("#modalContainer").modal(options);

options：

• backdrop        值：boolean或者'static'。指定一个静态的背景，使其在用户点击模态框外部时不会关闭模态框
• keyboard        值：boolean（默认true）。按下Esc键时是否关闭模态框
• show               值：boolean。初始化时是否显示
• remove            值：path。异步（jquery.load）为模态框主体注入内容。可以是带有有效url的href，此时会加载url的内容。

打开和隐藏：

$("#modalContainer").modal("show");  /  $("#modalContainer").modal("hide");  /  $("#modalContainer").modal("toggle");

此外，还有一些模态框的事件，在函数中可以当钩子使用。

$("#modalContainer").on( eventName , function(){} );

eventName有以下几种情况：

• show.bs.modal        在调用show方法后触发
• shown.bs.modal      当模态框对用户可见是时触发
• hide.bs.modal          在调用hide方法后触发
• hiden.bs.modal        当模态框完全对用户隐藏时触发

 

• 注意事项

三、总结

经过两者的对比，发现Modal在显示方面更方便，因为不用定义大小，它自己能够调整到合适的大小显示。

 

四、补充

在样式方面的不写补充。

dialog：

可以自定义对话框中部件的样式，然后在options中引入 dialogClass:自定义css名称

定义css时格式：

class 名称：

    ui-dialog：对话框的外层容器。
        ui-dialog-titlebar：包含对话框标题和关闭按钮的标题栏。
            ui-dialog-title：对话框文本标题周围的容器。
            ui-dialog-titlebar-close：对话框的关闭按钮。
        ui-dialog-content：对话框内容周围的容器。这也是部件被实例化的元素。
        ui-dialog-buttonpane：包含对话按钮的面板。只有当设置了 buttons 选项时才呈现。
            ui-dialog-buttonset：按钮周围的容器。

modal：

为模态框容器添加.modal class，才能够被触发
.fade class,当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。