用jQuery实现掩模层的方法

本文介绍了用jQuery实现掩模层的方法，供大家参考：

1。假设#主要是最外层的div标签页体

2。背景被覆盖后，弹出窗口显示（默认未显示，所包含的CSS未在此发布）：




X

注意！








3、定义掩码功能ｓｃｒｉｐｔ.js和弹出式窗口操作功能，当然，ｓｃｒｉｐｔ.js，jquery.js需要包含在HTML页面：


warning_dialog = $（var的#警告对话框），
warning_dialog_detail = $（#警告对话框细节），
refresh_after_warning = $（#刷新后警告）；
显示/掩码
美元。fn.showwarningdialog =功能（细节，刷新）{
如果（$ isie6）{
$（。menu_select ）藏（）；
}
fn.mask（）美元；
warning_dialog_detail.html（详细）；
refresh_after_warning.val（刷新）；
warning_dialog.css（{
位置：绝对
左：50%
顶部：50%
余地：- 250px
缘顶：100px
边境：固体3px # CCC
Z：6000
}）；
warning_dialog.show（）；
}
删除遮罩层
美元。fn.hidewarningdialog =函数（）{
如果（$ isie6）{
$（。menu_select ）显示（）；
}
fn.unmask（）美元；
如果（refresh_after_warning（= =真。Val））{
$（#主）ShowLoading（）；
location.reload（真的）；
别的}
warning_dialog.hide（）；
}
显示/遮罩效果
美元。fn.mask =函数（）{
This.unmask（）；
参数
var = {
背景：# CCC，
z：5100，
不透明度：0.3
}；
var位置= {
顶部：0，
左：0
}；
VaR原=美元（#主）；
创建附加到对象的掩码层
无功maskdiv = $（）；
MaskDiv.appendTo（原创）；
无功maskwidth = original.width（）；
无功maskheight = original.height（）；
MaskDiv.css（{
位置：绝对的，
上图：position.top，
左：position.left，
Z：op.z，
宽度：maskwidth，
身高：maskheight，
背景颜色：op.bgcolor，
不透明度：0
}）；
MaskDiv.fadeIn（'fast，函数（）{（）{
淡入淡出效果
$（这）。FadeTo（'fast '，op.opacity）；
}）；
返回maskdiv；
}
删除遮罩效果
美元。fn.unmask =函数（）{
VaR原=美元（#主）；
如果（{ {此} 0 }此{ 0 }）！=窗口（文档）{
原始= $（此{ 0 }）；
}
Original.find（> div.maskdivgen）。FadeOut（'fast '，0、函数（））{
美元（这个）；
}）；
}


在这种情况下，我们使用主标记获取高度和宽度，如果您不想通过标签获得页面高度和宽度，则可以得到如下所示


当前页高度
功能pageheight（）{
返回document.body.scrollheight；
}
当前的页面宽度
功能纸宽（）{
返回document.body.scrollwidth；
}


4。呼叫遮罩层：



函数init（）{
< PHP
如果（味精）！=用户名输入错误）{
>
美元。fn.showwarningdialog（
< PHP
}
>
}
在window.onload =函数（）{
init（）；
}；



希望本文能对大家的jQuery程序设计有所帮助。