日期:2014-05-17  浏览次数:20426 次

怎样用jquery弹出一个层后,页面变灰不能操作
在层上进行一些操作后,如选择产品,单击确定后,层隐藏,页面变为正常可以操作

------解决方案--------------------
你讲的是结果,

如果你一个层放在页面上面,页面上的东西不是一样没法操作嘛,层再变成灰色的

这就是过程。就控制层显示不显示就可以了
------解决方案--------------------
关注中。。。。
------解决方案--------------------
其实是两个层,一个大的,一个小的,小的在大的上面,大的覆盖全屏,然后背景半透明,看似是页面变灰了。小的是用户操作的小窗口。
------解决方案--------------------
参考
下面有DEMO
------解决方案--------------------
JQUERY 的插件blockUI
------解决方案--------------------
//获得坐标
function getPosition() {
var top = document.documentElement.scrollTop;
var left = document.documentElement.scrollLeft;
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
//top=500;
left = 200;
//height=0;
width = 500;
return { top: top, left: left, height: height, width: width };
}
//屏蔽输入,显示蒙板
function showMask(id) {
var obj = document.getElementById(id);
obj.style.width = document.body.clientWidth;
obj.style.height = document.body.clientHeight;
obj.style.display = "block";
}
//隐藏蒙板
function hideMask(id) {
document.getElementById(id).style.display = "none";
}
//显示登录
function showPop(id) {
var width = 300; //弹出框的宽度
var height = 170; //弹出框的高度
var obj = document.getElementById(id);
obj.style.display = "block";
obj.style.position = "absolute";
obj.style.zindex = "10";
obj.style.overflow = "hidden";
obj.style.width = width + "px";
obj.style.height = height + "px";
var Position = getPosition();
leftadd = (Position.width - width) / 2;
topadd = (Position.height - height) / 2;
obj.style.top = (Position.top + topadd) + "px";
obj.style.left = (Position.left + leftadd) + "px";
window.onscroll = function() {
var Position = getPosition();
obj.style.top = (Position.top + topadd) + "px";
obj.style.left = (Position.left + leftadd) + "px";
};
}
//隐含
function hidePop(id) {
document.getElementById(id).style.display = "none";
}
------解决方案--------------------
<!--蒙板-->
<div id="mask" style="filter: Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3;
opacity: 0.3; background-color: #000; width: 100%; height: 100%; z-index: 5px;
position: absolute; left: 0; top: 0; display: none; overflow: hidden;">
</div>
<!--蒙板结束-->
------解决方案--------------------
呵呵 一直在找这个实现的方法。
------解决方案--------------------
其实是两个层,其中一层使用滤镜效果,半透明化,看上去像变灰。
Jquery本身没有这个功能,但有很多插件,可能能满足你的效果。
参考
http://blog.csdn.net/wdzr_826/archive/2008/01/29/2072169.aspx