div被遮住，如何让div层显示在最外面一层z
div被遮住，如何让div层显示在最外面一层z
1、首先需要做的就是创建两个div。 2、创建了div后，我们需要分别给它们Class属性。 3、接下来，我们使用css，通过Class属性给它们设置样式。 4、我们需要给于它们一个宽度与高度，为了便于观察，我们可以给它们一个边框，这样便于观察。 5、接下来，我们先给不悬浮的div设置样式，我们给它设置一个背景颜色。 6、接下来，我们设置悬浮起来的div的样式，我们需要先将其进行绝对定位。设置其position。 7、接下来，我们设置浮动div的位置，需要使用到的是top与left.具体如下图所示，同时，为了便于观察，我将悬浮的div的宽度与高度修改了。
js弹出div并显示遮罩层
js弹出div并显示遮罩层
弹出div显示遮罩层的效果，想必大家都有见到过吧，下面有个示例，大家可以参考下
代码如下:
//--------------------弹出层-------------------
//popDivId:弹出层div的ID
//dragDivId:用于拖动div的ID
//isShowMask:是否显示遮罩层
function
popDivShow(popDivId,
dragDivId,
isShowMask)
{
if
(isShowMask)
{
creatMask(popDivId);
}
var
oWins
=
document.getElementById(popDivId);
var
oWins_title
=
document.getElementById(dragDivId);
var
bDrag
=
false;
var
disX
=
disY
=
0;
oWins.style.display
=
"block";
oWins_title.onmousedown
=
function(event)
{
var
event
=
event
||
window.event;
bDrag
=
true;
disX
=
event.clientX
-
oWins.offsetLeft;
disY
=
event.clientY
-
oWins.offsetTop;
this.setCapture
&&
this.setCapture();
return
false;
};
document.onmousemove
=
function(event)
{
if
(!bDrag)
return;
var
event
=
event
||
window.event;
var
iL
=
event.clientX
-
disX;
var
iT
=
event.clientY
-
disY;
var
maxL
=
document.documentElement.clientWidth
-
oWins.offsetWidth;
var
maxT
=
document.documentElement.clientHeight
-
oWins.offsetHeight;
iL
=
iL
<
0
?
0
:
iL;
iL
=
iL
>
maxL
?
maxL
:
iL;
iT
=
iT
<
0
?
0
:
iT;
iT
=
iT
>
maxT
?
maxT
:
iT;
oWins.style.marginTop
=
oWins.style.marginLeft
=
0;
oWins.style.left
=
iL
+
"px";
oWins.style.top
=
iT
+
"px";
return
false;
};
document.onmouseup
=
window.onblur
=
oWins_title.onlosecapture
=
function()
{
bDrag
=
false;
oWins_title.releaseCapture
&&
oWins_title.releaseCapture();
};
}
//
隐藏弹出层
function
popDivHidden(popDivId)
{
var
oWins
=
document.getElementById(popDivId);
oWins.style.display
=
"none";
window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));
}
//
获取弹出层的zIndex
function
getZindex(popDivId)
{
var
popDiv
=
document.getElementById(popDivId);
var
popDivZindex
=
popDiv.style.zIndex;
return
popDivZindex;
}
//
创建遮罩层
function
creatMask(popDivId)
{
//
参数w为弹出页面的宽度,参数h为弹出页面的高度,参数s为弹出页面的路径
var
maskDiv
=
window.parent.document.createElement("div");
maskDiv.id
=
"maskDiv";
maskDiv.style.position
=
"fixed";
maskDiv.style.top
=
"0";
maskDiv.style.left
=
"0";
maskDiv.style.zIndex
=
getZindex(popDivId)
-
1;
maskDiv.style.backgroundColor
=
"#333";
maskDiv.style.filter
=
"alpha(opacity=70)";
maskDiv.style.opacity
=
"0.7";
maskDiv.style.width
=
"100%";
maskDiv.style.height
=
(window.parent.document.body.scrollHeight
+
50)
+
"px";
window.parent.document.body.appendChild(maskDiv);
maskDiv.onmousedown
=
function()
{
window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));
};
}
在一个弹出的窗口上增加一个遮罩层？如图。
在一个弹出的窗口上增加一个遮罩层？如图。
Document #cover{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.3); display:none; z-index:1000; } 这是一个按钮 这是一个遮罩 var btn=document.getElementsByTagName('button')[0]; btn.addEventListener('click',function(){ var cover=document.getElementById('cover'); cover.style.display='block'; setTimeout(function(){ cover.style.display='none'; },5000) })
如何在浏览器窗口上添加一个遮罩层
如何在浏览器窗口上添加一个遮罩层
如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中，页面弹窗是一个很常见的交互方式，这样既可以避免不必要的页面跳转，也可以改进界面的布局和可交互性。 但是，浏览器原生的弹窗函数（alert, confirm, prompt）有着很大的局限性，主要是它们的展现UI一来很不美观，二来也不够灵活，因此，我们经常需要自行定义弹窗函数。 当我们要实现一个模式弹窗时（模式弹窗，即是说出现弹窗时，页面其它地方不可点击），通常的做法是用一个div将整个页面窗口遮挡住。 实现 下面，我们一步步地实现一种较为简洁有效的遮罩层： Step 1: 首先我们要考虑定义一个遮挡浏览器窗口的div，考虑下面一段html+css代码： <div unselectable="on" style="background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;"></div> 它可以实现遮挡浏览器窗口的功能，其中几个需要注意的css属性分别解释如下： 1)background:#000: 将div的背景色设置为黑色; filter:alpha(opacity=10): 在IE下，将div的透明度设置为0.1; opacity:.1: 在非IE下，将div的透明度设置为0.1 以上三个属性联合起来，实现了页面其余元素的“被挡住但可见”的效果。 2)left:0px;top:0px;position:fixed;height:100%;width:100%: 定义div的高度和宽度分别是浏览器高度和宽度的100%。这里有个小技巧，如果div的position是fixed或者absolute，那么当div的高度设置为百分比(例如100%)时，div的高度将参照浏览器可视区域(viewport)的高度来计算。此外，设置position为fixed，可以使得浏览器即使在scroll或resize时也保证遮罩层一直挡在页面的可视区域。 3)overflow:hidden 用来避免滚动条的出现。 Step 2: 细心的读者应该可以发现上述的css代码并不适用于IE 6，原因有两个：一来，IE6不支持position:fixed；二来，更重要的是，在IE 6中，height:100%不起作用，div的高度不再参照浏览器可视区域的高度。 修正第一个缺陷很简单，只需用css hack，加上 _position:absolute 就行。 修正第二个缺陷，我们需要借助javascript，动态地计算出遮罩层的高度和宽度，特别注意的是，为保证遮罩层在页面滚动时也遮住窗口，遮罩层的高宽应该覆盖住滚动区域。 动态计算的代码如下，其中mask变量指向遮罩层： 复制代码 代码如下: function calculateSize() { var b = document.documentElement.clientHeight ? document.documentElement : document.body, height = b.scrollHeight > b.clientHeight ? b.scrollHeight : b.clientHeight, width = b.scrollWidth > b.clientWidth ? b.scrollWidth : b.clientWidth; mask.css({height: height, width: width}); } 此外，还需注意到，当页面大小发生变化时，要重新计算遮罩层的高宽，否则可能会新扩大的区域没有被遮罩。 复制代码 代码如下: function resize() { calculateSize(); $(window).on(“resize”, calculateSize); } Step 3: 通过Step 1和Step 2，我们基本上已完成了构建遮罩层的工作。但工作并未完成，在IE6下，还需考虑一些特殊的情况：当页面上存在select元素的时候，遮罩层将无法遮住select元素，这是IE 6的一个著名bug，解决方案是在遮罩层中增加一个iframe。 Html+css代码如下： 复制代码 代码如下: <div unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;_position:absolute;height:100%;width:100%;overflow:hidden;z-index:10000;"><div style="position:absolute;width:100%;height:100%;top:0;left:0;z-index:10;background-color:#000"></div><iframe border="0" frameborder="0" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:1"></iframe></div> 有几个小技巧需要稍作解释： 1)iframe的样式使用 width:100%;height:100%; ，这是可行的，因为它的父定位元素的高宽已经确定了 2)在遮罩层内部，除了一个iframe外，还增加了一个div，并且该div和iframe的position都是absolute，div的z-index大于iframe的z-index，这样一来，就使得内部div遮挡住了iframe。这具有现实意义：使得页面的一些事件（例如onclick, onmouseup, onmousemove）依然会被响应在本页面上，而不是被iframe截获。 代码示例 综合以上的分析，整体的实现代码如下，大家可以参考一下： 复制代码 代码如下: var windowMask = (function($) { var isIE6 = $.browser.msie && $.browser.version == "6.0"; var mask = '<div unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;"></div>'; isIE6 && (mask = '<div unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;_position:absolute;height:100%;width:100%;overflow:hidden;z-index:10000;"><div style="position:absolute;width:100%;height:100%;top:0;left:0;z-index:10;background-color:#000"></div><iframe border="0" frameborder="0" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:1"></iframe></div>'); mask = $(mask); $("body").append(mask); function show() { isIE6 && resize(); mask.show(); } function hide() { isIE6 && $(window).off("resize", calculateSize); mask.hide(); } function calculateSize() { var b = document.documentElement.clientHeight ? document.documentElement : document.body, height = b.scrollHeight > b.clientHeight ? b.scrollHeight : b.clientHeight, width = b.scrollWidth > b.clientWidth ? b.scrollWidth : b.clientWidth; mask.css({height: height, width: width}); } function resize() { calculateSize(); $(window).on("resize", calculateSize); } return { show: show, hide: hide }; })(); 使用很简单，当需要展现遮罩层时，调用 windowMask.show()，要移除遮罩层时，调用 windowMask.hide()。
请教DIV遮罩层显示问题
请教DIV遮罩层显示问题
弹出层
//登陆弹出对话框，并使背景元素不可用
var div_width = 400;
var div_height = 300;
function showWindow(width,height){
location.href="#";
width = div_width;
height = div_height
var windowstr= document.getElementById("popLayer").innerHTML;
document.getElementById("infoDiv").innerHTML=windowstr;
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=200+"px";
document.getElementById("infoDiv").style.zIndex=1;
document.getElementById("infoDiv").style.width=width;
document.getElementById("infoDiv").style.height=height;
document.getElementById("infoDiv").style.border="3px solid #0099ff";
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
document.getElementById("tranDiv").style.display="";
document.getElementById("tranDivBack").style.display="";
document.getElementById("tranDivBack").style.zIndex=0;
document.getElementById("infoDiv").style.display="";
}
function closeWindow(){
document.getElementById("tranDiv").style.display="none";
}
点此关闭
点击此处看看
js弹出的遮罩层，如何能遮住全屏？
js弹出的遮罩层，如何能遮住全屏？
只需5个步骤就可以解决遮住全屏的问题。 1．打开UE编辑器，创建一个空白的HTML源文件和CSS源文件，如下图。 2．在个HTML文件中输入下列HTML代码，如下图参考。 3．在CSS文件中输入以下CSS代码，如下图。 4．编辑完成后，选择UTF8－noBOM模式保存文件，如下图。 5．在浏览器中打开HTML文件，您可以看到最终想要实现的遮住全屏效果，如下图。
jsp实现loading效果（遮罩层）
jsp实现loading效果（遮罩层）
jsp中实现loading效果，带遮罩层的实现方法如下： var MaskUtil = (function(){ var $mask,$maskMsg; var defMsg = '正在处理，请稍待。。。'; function init(){ if(!$mask){ $mask = $("").appendTo("body"); } if(!$maskMsg){ $maskMsg = $(""+defMsg+"") .appendTo("body").css({'font-size':'12px'}); } $mask.css({width:"100%",height:$(document).height()}); $maskMsg.css({ left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2, }); } return { mask:function(msg){ init(); $mask.show(); $maskMsg.html(msg||defMsg).show(); } ,unmask:function(){ $mask.hide(); $maskMsg.hide(); } } }()); 需要用到的css样式： .datagrid-mask-msg { position: absolute; top: 50%; margin-top: -20px; padding: 12px 5px 10px 30px; width: auto; height: 16px; border-width: 2px; border-style: solid; display: none; } 实现的效果：
如何用css或js jq在不是背景的图片上面加一层即透明又渐变得遮罩层
如何用css或js jq在不是背景的图片上面加一层即透明又渐变得遮罩层
ie下面高版本的渐变又透明的才行。没法透明，可以考虑使用透明png。 rgba最后面的那个1可以改为0.8试试看，就变成透明的了。。 #box{width:200px;height:200px;overflow:hidden;position: relative;}#box span{display: block;width:100%;height:100%;position: absolute;top:0;left:0;background-image:linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);background-image:-o-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);background-image:-moz-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);background-image:-webkit-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);background-image:-ms-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#ffffff,grandientType=1);}
CSS遮罩层不能完全遮罩页面
关于样式div层被覆盖,如何把覆盖的显示在上面
我稍微改了下:主要是zindex的问题。
zIndex越大，越在上层，你想要被覆盖的在上面，那么你的那个hidDiv的zindex要小于原来的那个div
function showhidden(id,i){
var select_obj=document.getElementsByTagName("select");
if(i==1){
document.getElementById(id).style.display="";
document.getElementById(id).style.zIndex=-1;
}else{
document.getElementById(id).style.display="none";
}
}
helphelp
>
aaaaaaaaaaaaaa
html如何让其中一个div浮在另一个div上面
1、设置div样式 z-index:auto，auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。前提是div是定位元素。 2、可以使用float元素进行实现该效果。代码实例如下： 效果如下： 例子代码： 重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性。2、position:relative和position:absolute设置对象属性为可定位（可重叠）。3、left right top bottom绝对定位具体位置设置。 配合的样式1、css width2、css height3、background 为了观察效果，我们对不同DIV设置不同背景颜色进行区别。 扩展资料：z-index的值为正整数值，数字越大对应对象层越浮上层越靠前。 以上实例默认顺序是“.div-c”浮在最上层（蓝色背景层）、“.div-b”浮在中层（黄色背景层）、“.div-a”排最底层（红色背景层）。我们接下来使用z-index样式在不改变html代码情况下实现顺序颠覆。 “.div-b”浮在中层（黄色背景层）排序不变，实现“.div-a”浮在最上层（红色背景层）、“.div-c”排最底层（蓝色背景层）。 参考资料：百度百科DIV
js如何实现点击图片弹出窗口并放大这张图片,弹出的窗口有半透明遮罩层效果，弹出的窗口不跳页面
通过JS代码 document.getElementById('divID').style.etElementById('divID').style.display = 'none'。函数可以实现。 1、遮罩层： ，即作为背景层，覆盖整个页面。弹出层：，即背景层上的一层，此层可根据#form{top: 10%; left: 10%;width: 20%;height: 30%;}，调整弹出层的弹出位置。 2、弹出层和遮罩层全部为div标签，可以利用display来控制显示和隐藏的属性，在js中，显示： document.getElementById('divID').style.display = document.getElementById('divID').style.display = 'none'。 3、显示遮罩层和弹出层，即可用图中popDiv（）函数表示： 其中，showId 表示弹出层的divId, backId 表示遮罩层的divId；函数第去、2行显示弹出层和遮罩，3、4、5行设置遮罩层的长度、宽度。 4、关闭弹出层和遮罩层用hideDiv函数（）， 其中：showId 表示弹出层的divId, backId 表示遮罩层的divId；先关闭弹出层，后关闭遮罩层。 5、点击按钮后，弹出，要给按钮加上onclick函数，点我，显示弹出层。 6、整体代码如下，css 样式可根据个人的喜好自行添加。
JS代码注释`（div 层遮罩/弹出框）
有很多方法可以实现，基本原理是一样的。你的实现方法是这样的：遮罩部分2个层和登录的层一开始设置的属性为display:none，这是不可见的，点击那个超链接后，开始运行js代码，登录层的内容被复制到了遮罩部分的第二个层里面成为了新的登录层，并设置这个层为最上面，遮罩部分的第一个层设置在新登录层的下面，并设置成充满整个浏览器，背景黑色，透明度为30%，这样你看上去就是半透明的了，并且很大。原来的超链接层再最下面。因为半透明的层在原来超链接层的上面并且很大，所以用鼠标点击的时候只是点击在了半透明的层上面，并没有点击到超链接层上面。
js注释：
////下面 设置了一个空链接
location.href="#";
//下面2行是赋值
width = div_width;
height = div_height
//下面 得到登录层也就是id为popLayer的层的内容
var windowstr= document.getElementById("popLayer").innerHTML;
//下面 把登录层内容放到infoDiv层里，形成新的登陆层
document.getElementById("infoDiv").innerHTML=windowstr;
//下面2行设置新登录层的位置
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=200+"px";
//下面设置新登录层的zIndex值，这个值越大显示的时候就越在上面
document.getElementById("infoDiv").style.zIndex=10001;
//下面2行设置新登录层的宽和高
document.getElementById("infoDiv").style.width=width;
document.getElementById("infoDiv").style.height=height;
//设置新登录层边框
document.getElementById("infoDiv").style.border="3px solid #0099ff";
//tranDiv层里面包含了2个层 一个是半透明的遮罩层tranDiv，另一个是新的登录层infoDiv。可以把它看做一个容器。下面2行设置它的高和宽为网页内容可视区域的高度和宽度，这样这个层就充满整个浏览器了
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
//下面 设置这个容器层为可见
document.getElementById("tranDiv").style.display="";
//tranDiv就是那个半透明的遮罩层，现在也设置为可见
document.getElementById("tranDivBack").style.display="";
//下面 设置zindex值为10000，这个值比新登录层少1，表明在新登录层的下面
//document.getElementById("tranDivBack").style.zIndex=10000;
//下面 设置新登录成为可见
//document.getElementById("infoDiv").style.display="";
下面这个就是容器层，它的左上角位于浏览器的0，0位置就是浏览器的左上角，高度宽度在js里设置
下面这个是遮罩层 它位于容器层的0，0位置，宽度和高度都是100%，就是他的大小和位置和容器层一样，都是整个网页那么大。下面的filter用的是滤镜，他设置的是半透明，Opacity=30 半透明度30%，#000000是黑色，这样看起来就是黑色半透明的一个大层了
下面是新的登陆层，位置和高度在这里写了，但是运行js的时候会对其进行重新设置
CSS遮罩层不能完全遮罩页面
CSS遮罩层不能完全遮罩页面，是设置错误造成的，解决方法如下： 1、先看下html，一个img图片控件，和一个有mask样式的div，里面有文字，这个就是遮罩层。 2、然后看下样式定义，先看下图片容器和图片的样式，如图，其中要注意的是img_container样式里定义了position: relative;这个主要是为了让遮罩层做绝对定位做准备的。 3、再看下遮罩层样式定义，代码如图，其中需要注意的是定位样式，设置了absolute的绝对定位，另外还有半透明的background样式设置：background: rgba(0, 0, 0, 0.7);。可以通过修改后面的0.7这个数字来改变透明度。 4、接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写，所以先引入jquery脚本库。 5、添加mouseover，mouseout事件，主要就是当鼠标移动到图片容器上时，显示遮罩层，移出时，隐藏遮罩层。 6、刷新页面，在页面上是正常显示的图片，当把鼠标放上去时，就显示了遮罩层了。