LDSports乐动体育

SimpleModal是一个轻量级的jQuery插件，它为模态窗口的开发提供了一个强有力的接口，可以把它当作模态窗口的框架。simpleModal非常的灵活，可以创建你能够想象到的东西。并且你还不需要考虑UI开发中跨浏览器相关问题。下面苏州网站制作带大家一起来了解下这个插件。

Eric Martin设计了simpleModal插件，并一直在进行改善和维护。

下载地址：

simpleModal提供了两种简单方法来调用模态窗口。第一种方法是作为一个链式的jQuery函数。你可以在一个用jQuery获取的元素上调用modal()函数，之后用这个元素的内容来显示一个模态窗口。比如：

<pre>$(“#element”).modal();</pre>

第二种方法是作为单独的一个函数使用。通过传递一个jQuery对象，DOM元素或纯文本（可以包含html）来创建一个模态窗口。比如：

<pre>$.modal(“<div><h1>simpleModal</h1></div>”)</pre>

以上两种方法都可以接受一个可选参数，比如：

<pre>$(“#element”).modal({options});</pre>

<pre>$.modal(“<div><h1>simpleModal</h1></div>”,{options})</pre>

因为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定义是必须的。

关闭模态窗口，simpleModal自动为模态窗口内class是simplemodal-close的元素绑定了关闭函数。所以只要在html中添加如下代码就可以关闭窗帘：

<pre><button type=’button’ class=’simplemodal-close’>关闭</button>或者<a href=’#’ class=’simplemodla-close’>关闭</a></pre>

此外，你也可以通过调用$.modal.close()的方式关闭当前打开的模态窗口。

如果你不想使用‘simplemodal-close’作为默认的关闭接口，而是想自己定义，那么你可以修改全局参数，代码如下：

<pre>$.modal.defaults.closeClass=”modalClose”;</pre>

以上代码将会会class为“modalCLose”绑定关闭函数。

如果要修改多个默认参数，可以使用如下代码：

<pre>

$.extend($.modal.defaults,{

closeClass:”modalClose”,

closeHTML:”<a href=’#’>close</a>”

});