Jquery超简单遮罩层实现代码

时间 2019-11-12

原文原文链接

1.样式以下设置： javascript

CSS代码： css

其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；只须要都加上，即可以火狐和IE下均可以使用。 html

2.指定层的高度、和宽度。 java

js代码 ajax

xxx = function(){ url

//遮罩层
//$("#mask").css("cursor","not-allowed");
$("#mask").css("width",($(document).width()+$(document).scrollLeft()));
$("#mask").css("height",($(document).scrollTop()+$(document).height()));
$("#mask").show();
//弹出层
$("#dialog").load(url);
var left = screen.width/3 ;
var top = screen.height/6 ;
$("#dialog").css("left",left);
$("#dialog").css("top",top)
$("#dialog").toggle(); spa

//设置diaolog高宽 code

........
} htm

</script>

3.在<body>中加入以下代码，而后就能够看效果了：

html代码

<div id="mask" >
</div>

<div id="dialog" >
</div>

4.使用方法：

在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask()