淘先锋技术网

首页 1 2 3 4 5 6 7

jquery1.9.1是一款非常流行的JavaScript库,它提供了丰富的API和方法,方便我们实现各种功能。其中,遮罩层是常用的一种效果,可以用于实现弹窗、模态框等需求。

//创建遮罩层
var mask = $('
').addClass('mask'); //添加遮罩层到body中 $('body').append(mask); //显示遮罩层 mask.show();

上述代码中,通过$方法创建了一个div元素,添加了class为mask,即为遮罩层的样式。然后将该元素添加到body中,并通过show方法显示遮罩层。

//隐藏遮罩层
mask.hide();
//移除遮罩层
mask.remove();

隐藏和移除遮罩层同样很简单,只需调用hide和remove方法即可。当然,如果需要多次使用遮罩层,也可以将其封装成一个函数,方便调用。

//封装遮罩层函数
function showMask(){
var mask = $('
').addClass('mask'); $('body').append(mask); mask.show(); } function hideMask(){ $('.mask').hide(); $('.mask').remove(); }

最后,在使用遮罩层时,要注意遮罩层的层级关系。遮罩层应该位于其他页面元素的上方,通常可以设置其z-index属性为一个较大的值,如1000。

.mask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}

以上是使用jquery1.9.1实现遮罩层的基本方法和注意事项,希望对大家有所帮助。