jqModal实例

jqModal是jQuery一个常见的用来实现自定义弹出窗口的插件。本文将不涉及更详细的技术细节，只会结合一些实例来简单的介绍一下它的使用方法。更多

详细的资料请参看文末的参考链接。

在我们讨论实际的例子之前，首先我们需要知道实现一个jqModal窗口的三个要素：
1.隐藏在普通网页中的jqModal窗口代码
2.jqModal窗口的初始化
3.一个可以触发这个jqModal窗口的trigger

如果只看上面的三点可能太抽象了，下面我们就结合例子看看怎么样利用这三个要素来实现一个jqModal窗口：

1.一个最简单的jqModal实例（jqModal官网中的第一个例子）

首先我们要有一个可以触发jqModal窗口的链接（要素３）。注意这里的class需要定义为"jqModal"，这样jqModal就会默认这个链接为新窗口的trigger。
<a href="#" class="jqModal">view</a>

接下来我们就要初始化这个jqModal窗口（要素２）。这里我们只需要一个默认的窗口，所以括号里什么属性都没有设置。我们还可以从这里知道新窗口的id为"dialog"。

<script type="text/javascript">
$().ready(function() {
 $('#dialog').jqm();
});
</script>

最后当然就是我们的jqModal窗口了（要素１）。和上面一样，这里的class需要定义为"jqmWindow"，
这也是jqModal的默认设置。还要注意的是这里的id也要和上面初始化时的一致。

<div class="jqmWindow" id="dialog">
<a href="#" class="jqmClose">Close</a>
<hr>
 弹出窗口的文字...
</div>

注意，jqModal还提供了很多常用的functions，比如这里的class "jqmClose"，利用它我们就可以生成一个可以退出新窗口的链接。

2.jqModal最常用的function: jqmShow

上一个例子中我们只是使用了jqModal的默认的行为去生成自己的窗口，但是在实际应用中我们更多的是需要自己主动地去控制。jqModal当然也提供了很多functions，jqmShow就是最常用的一个。顾名思义，这个function是用来主动生成我们自定义的窗口。我们来修改一下上一个例子：

这次我们用button代替原来的链接，这个button和普通的button没有任何区别。（要素３）
<input type="button" id="view" value="view" />

注意这里和上一个例子的区别，当我们点击上面定义的button时就会触发这个新窗口。（要素２）

<script type="text/javascript">
$().ready(function() {
 $('#dialog').jqm();
});
$('#view').click(function() {
 $('#dialog').jqmShow(); //显示jqModal窗口
});
</script>

其他的部分我们不做修改，所以这里就省略了（参考上面的例子）。

3.jqModal常用参数modal

jqModal除了提供很多functions以外也内置了很多参数。我们需要在初始化的时候对jqModal窗口进行配置。这里我们只对上面的例子做一个很小的修改：

$().ready(function() {
 $('#dialog').jqm(modal:true); //设置modal为true，默认为false
});

具体的效果请大家自己做一下实验或者参考一下官网上的资料。

最后还要提醒一下，只要在网站的css中创建自己的class（参考jqModal.css），我们就可以拥有符合自己需要的新窗口了。

参考链接：

jQuery官方网站：http://jquery.com/
jqModal官方网站：http://dev.iceburg.net/jquery/jqModal/