jqmodal遮罩层的实现

前些天公司的项目中，为了一些特效，要用到遮罩效果。了解了一下，据说jqModal这个插件不错，于是花了一些工夫，学习了一下jqModal这个插件，最终在项目中得到了应用。现在就将jqModal这个插件的使用方法总结一下，希望能够帮助到以后的使用者，^-^。

本篇主要说明一下插件使用中几个要注意的地方。首先看看最简单的html代码，以下就是我们要弹出的遮罩层。

<divclass="pop_box"id="pop"></div>

接下来简单的看看jqModal遮罩层的样式：

.pop_box { 
        background-color:#79A5D1; 
        display:none; 
        height:342px!important; 
        left:50%; 
        margin-left:-250px; 
        padding:5px; 
        position:fixed; 
        top:150px; 
        width:500px; 
        z-index:9999;}

其中比较重要的为jqModal遮罩层的position和z-index属性。为了保证遮罩层在最上边，建议将z-index值设置大些。

最后看下怎么使用jqModal插件。

jQuery(document).ready(function(){
    jQuery("#pop").jqm({
        modal:true,
        overlay:40,
        onShow:function(h){
            h.w.fadeIn(500);},
        onHide:function(h){
            h.o.remove();
            h.w.fadeOut(500)}}).jqmAddClose("#close");
    jQuery("#show").click(function(){
        jQuery("#pop").jqmShow();});});

.jqm()初始化遮罩，modal:true时，一直显示遮罩层。overlay为遮罩程度，大家可以自己试试。onShow为遮罩层显示方式，本例中为fadeIn()，onHide为关闭遮罩层。jqmAddClose()添加关闭遮罩层的选择器，可以为ID选择器，也可以为样式选择器。

.jqmShow()为执行遮罩，本例中当点击“显示遮罩层”链接时，显示遮罩。

http://dev.iceburg.net/jquery/jqModal/ 为jqModal官方的示例，更多详细的说明和更多的应用都可以找到。jqModal文件小, 速度快, 可定制性非常好,推荐大家使用。

查看演示