首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jqmodal遮罩层的兑现

2012-10-11 
jqmodal遮罩层的实现前些天公司的项目中,为了一些特效,要用到遮罩效果。了解了一下,据说jqModal这个插件不

jqmodal遮罩层的实现

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

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

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文件小, 速度快, 可定制性非常好,推荐大家使用。

热点排行