7.3 模态窗口插件—SimpleModal
7.3 模态窗口插件—SimpleModal
7.3.1 SimpleModal插件简介
SimpleModal是一个轻量级的jQuery插件，它为模态窗口的开发提供了一个强有力的接口，可以把它当作模态窗口的框架。SimpleModal非常的灵活，可以创建你能够想像到的任何东西，并且你还不需要考虑UI开发中的跨浏览器相关问题。
Eric Martin设计了SimpleModal插件，并一直在进行改善和维护。
7.3.2 下载地址
jQuery SimpleModal插件的下载地址为：
http://www.ericmmartin.com/projects/simplemodal/
在图7-11所示界面中，读者可以下载该插件、查看英文文档和版本更新说明等。
[插图]
7.3.3 快速上手
SimpleModal提供了两种简单方法来调用模态窗口。
第一种方法是作为一个链式的jQuery函数。你可以在一个用jQuery获取的元素上调用modal()函数，之后用这个元素的内容来显示一个模态窗口。比如：
[插图]
第二种方法是作为一个单独函数使用。通过传递一个jQuery对象，DOM元素或纯文本（可以包含HTML）来创建一个模态窗口。比如：
[插图]
以上的两种方法都可以接受一个可选参数，比如：
[插图]
因为SimpleModal不仅仅是一个模态窗口框架，以上的两个例子只是创建非常基本的没有样式模态窗口。你也可以通过外部CSS，选项对象或两个一起来应用样式。modal overlay、container和data元素的CSS选项分别是：overlayCss、containerCss和dataCss，它们都是键值对（Key/Value）属性。SimpleModal为显示一个模态窗口设置了必要的CSS，另外它动态地把模态窗口置于屏幕中间，除非预先使用了position参数。
SimpleModal在内部定义了如下CSS 类：simplemodal-overlay，simplemodal-container，simplemodal-wrap（如果内容比container大，那么它将自动设置overflow为auto）和simplemodal-data。
SimpleModal的closeHTML参数默认声明一个用于关闭模态窗口的图片样式：modalcloseImg，因为它被定义在参数里面，不能通过参数来应用样式，所以一个外部CSS定义是必须的。
[插图]
如果IE6你也想用PNG图片的话，你可能要这么做：
[插图]
7.3.4 关闭模态窗口
SimpleModal自动为模态窗口内class是“simplemodal-close”的元素绑定了关闭函数。所以只要在HTML中添加如下代码就可以关闭窗口：
[插图]
此外，你也可以通过调用$.modal.close()的方式关闭当前打开的模态窗口。
如果你不想使用“simplemodal-close”作为默认的关闭接口，而是想自己定义，那么你可以修改全局参数，代码如下：
[插图]
以上代码将会为class为“modalClose”绑定关闭函数。
如果要修改多个默认参数，可以使用如下代码：
[插图]
7.3.5 实际应用
接下来我们使用SimpleModal来制作模态提示框和模态的iframe。
首先我们在页面中插入将要弹出的内容，并把样式设置好：
[插图]
然后我们就可以利用下面的代码调用SimpleModal：
[插图]
弹出效果如图7-12所示。
[插图]
同样，如果要弹出一个iframe页面，那么使用方式也类似。
首先还是在页面中新建一段HTML代码，代码如下：
[插图]
此时iframe的src是没有指向地址，我们可以在调用SimpleModal的时候，给它赋一个值，代码如下：
[插图]
这样，我们就能把 iframe 页面以模态窗口的方式显示出来了。在以上代码中，在调用SimpleModal 时，设置了 3个参数。”opacity”是用来设置遮罩层的不透明度的。”overlayClose”设置为true，代表着单击遮罩层也能关闭模态窗口。”containerId”是一个非常有用的参数，它用来设置模态窗口容器的ID（默认值为simplemodal-container），通过这个钩子，我们能为容器定义各种规则。比如本例中，容器的ID被设置为ifr-dialog-content，在CSS样式中，为它设置的样式如下：
[插图]
7.3.6 API
SimpleModal插件的官方API地址为：
http://www.ericmmartin.com/projects/simplemodal/
关于SimpleModal插件的API内容，读者可以参考附录F的介绍。