js与css实现弹出层覆盖整个页面的方法，html实现的遮罩

发表于 由admin 
<div style=" position: fixed; width: 100%; height: 100%; 
left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div>

js css 完结遮罩层覆盖任何页面成分附图，css遮罩

<div style=" position: fixed; width: 100%; height: 100%; 
left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div>

z-index 必得大于遮罩成分

demo

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<style type="text/css"> 
ul, ul ul { 
list-style-type:none; 
margin: 0; 
padding: 0; 
width: 15em; 
} 

ul a { 
display: block; 
text-decoration: none; 
} 

ul li { 
margin-top: 1px; 
} 

ul li a { 
background: #333; 
color: #fff; 
padding: 0.5em; 
} 

ul li a:hover { 
background: #000; 
} 

ul li ul li a { 
background: #ccc; 
color: #000; 
padding-left: 20px; 
} 

ul li ul li a:hover,ul li ul .current a { 
background: #aaa; 
border-left: 5px #000 solid; 
padding-left: 15px; 
} 

</style> 
</head> 

<body> 
<div id="bb" style="background-color: red;display:none;z-index: 99999; max-height:79.3%; position: fixed; filter: alpha(opacity=70); Opacity:0.7; top: 10px; left:5px;"> 
<ul> 
<li> 
<a href="">老大</a> 
<ul> 
<li> 
<a href="javascript:alert('you can do you want');">老大大</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大二</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大三</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大四</a> 
<li> 
</ul> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老二</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老三</a> 
<li> 
<li> 
<a href="">老四</a> 
<ul > 
<li><a href="javascript:alert('you can do you want');">老一</a><li> 
</ul> 
<li> 
</ul> 
</div> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 

<br> 
<br><br><br> 
<br> 
<br> 
<button id="aa">哈哈</button> 
<div id="zz" style="display:none;position: fixed; width: 100%; height: 100%; 
left: 0px; top: 0px; background-color: Black; z-index: 1999; filter: alpha(opacity=70); Opacity:0.7;"></div> 
</body> 
<script type="text/javascript"> 
$(function(){ 
$("#aa").click(function(){ 
$("#zz").show(); 
$("#bb").show(); 
$("#bb").animate({left:'100px'}); 
$("#bb").animate({left:'0px'}); 
}); 
$("#zz").click(function(){ 
$("#bb").animate({left:'-240px'}); 
$("#zz").hide(); 
}); 
$('#bb ul li ul').hide(); 
$("#bb ul li a").click(function(){ 
var a= $(this); 
var nextobj=a.next(); 
if(nextobj.is("ul")){ 
$('#bb ul li ul:visible').slideUp('normal'); 
if(!nextobj.is(':visible')){ 
nextobj.slideDown('normal'); 
} 
return false; 
} 
}); 
}); 
</script> 
</html>

图片 1

正文实例陈述了js与css实现弹出层覆盖全部页面的不二诀要。分享给大家供大家参谋。具体达成格局如下：

——————页面遮罩（CSS+JS+HTML）——————

HTML：

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

CSS：

/***********-  遮罩层  -***********/
#mask{
            position: absolute;
            top: 0px;
            left:0px;
            background:#333;
            opacity:0.5;
            /* older safari/Chrome browsers */
           -webkit-opacity: 0.5;
           /* Netscape and Older than Firefox 0.9 */
           -moz-opacity: 0.5;
           /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
                 -khtml-opacity: 0.5;
             /* IE 4-9 */

            filter:alpha(opacity=50);
            /*This works in IE 8 & 9 too*/
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            z-index:100;
            display:none;

        }

JS(JQuery):得到页面高宽，显示遮罩

1 function showMask(){
2   $("#mask").css("height",$(document).height());
3   $("#mask").css("width",$(document).width());
4   $("#mask").show();
5 }

备注：在职业管理函数中调用showMask()方法就可以

 

z-index 必得大于遮罩成分

CSS遮罩层不能完全遮罩页面

你那个装置的height:百分百 意思正是浏览器窗口的二个可观
也等于你设置的body:百分之百的惊人
假设您页面里面包车型大巴内容超过了浏览器窗口呈现的限量
也正是出现了滚动条的话，那您带来滚动条的话上面就能够并发未有被遮罩的部分。你可以先判定你页面内容的莫斯中国科学技术大学学跟浏览器窗口大小比较，取最大值赋值给那一个遮罩层中度就能够了
 

弹出层透明背景加框的常用样式和组织如下:

demo

网页弹出三个div层 后边出现贰个半透明遮罩层 这是怎实现的

var p=document.createElement(“DIV”);
p.id=”MyAlertBoxMasker”;
p.style.position=”absolute”;
p.style.width=document.body.scrollWidth;
p.style.height=document.documentElement.offsetHeight;
p.style.zIndex=’998′;
p.style.top=’0′;
p.style.left=’0′;
p.style.backgroundColor=”gray”;
p.style.opacity=’0.5′;
p.style.filter=”alpha(opacity=80)”;
//内容层
var p1=document.createElement(“DIV”);
js与css实现弹出层覆盖整个页面的方法，html实现的遮罩。var
top=parseInt(parseInt(document.body.scrollHeight)*0.25)+document.body.scrollTop;
p1.id=”MyAlertBox”;
p1.style.position=”absolute”;
var left=document.documentElement.offsetHeight/2;
var left=0;
p1.style.zIndex=’999′;
p1.style.top=top+’px’;
p1.style.left=left+’px’;

p1.innerHTML=””;//这里是浮动层的有血有肉HTML内容
document.body.appendChild(p);
document.body.appendChild(p1);
//下面就是出现的代码。———–

//下边代码是关闭的
document.body.removeChild(document.getElementById(‘MyAlertBoxMasker’));
document.body.removeChild(document.getElementById(‘MyAlertBox’));
 

css 实现遮罩层覆盖任何页面成分附图，css遮罩
div style=” position: fixed; width: 百分之百; height: 百分百; left: 0px; top:
0px; background-color: Black; z-index: 9999…

复制代码 代码如下:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<style type="text/css"> 
ul, ul ul { 
list-style-type:none; 
margin: 0; 
padding: 0; 
width: 15em; 
} 

ul a { 
display: block; 
text-decoration: none; 
} 

ul li { 
margin-top: 1px; 
} 

ul li a { 
background: #333; 
color: #fff; 
padding: 0.5em; 
} 

ul li a:hover { 
background: #000; 
} 

ul li ul li a { 
background: #ccc; 
color: #000; 
padding-left: 20px; 
} 

ul li ul li a:hover,ul li ul .current a { 
background: #aaa; 
border-left: 5px #000 solid; 
padding-left: 15px; 
} 

</style> 
</head> 

<body> 
<div id="bb" style="background-color: red;display:none;z-index: 99999; max-height:79.3%; position: fixed; filter: alpha(opacity=70); Opacity:0.7; top: 10px; left:5px;"> 
<ul> 
<li> 
<a href="">老大</a> 
<ul> 
<li> 
<a href="javascript:alert('you can do you want');">老大大</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大二</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大三</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大四</a> 
<li> 
</ul> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老二</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老三</a> 
<li> 
<li> 
<a href="">老四</a> 
<ul > 
<li><a href="javascript:alert('you can do you want');">老一</a><li> 
</ul> 
<li> 
</ul> 
</div> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 

<br> 
<br><br><br> 
<br> 
<br> 
<button id="aa">哈哈</button> 
<div id="zz" style="display:none;position: fixed; width: 100%; height: 100%; 
left: 0px; top: 0px; background-color: Black; z-index: 1999; filter: alpha(opacity=70); Opacity:0.7;"></div> 
</body> 
<script type="text/javascript"> 
$(function(){ 
$("#aa").click(function(){ 
$("#zz").show(); 
$("#bb").show(); 
$("#bb").animate({left:'100px'}); 
$("#bb").animate({left:'0px'}); 
}); 
$("#zz").click(function(){ 
$("#bb").animate({left:'-240px'}); 
$("#zz").hide(); 
}); 
$('#bb ul li ul').hide(); 
$("#bb ul li a").click(function(){ 
var a= $(this); 
var nextobj=a.next(); 
if(nextobj.is("ul")){ 
$('#bb ul li ul:visible').slideUp('normal'); 
if(!nextobj.is(':visible')){ 
nextobj.slideDown('normal'); 
} 
return false; 
} 
}); 
}); 
</script> 
</html>

.alertMessageBg{
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
.alertMessageDivBorder{
position:fixed;
_position:absolute;
width:750px;
height:370px;
left:50%;
top:50%;
margin:-185px 0 0 -375px;
background:#000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
z-index:98;
display:none;
}
.alertMessageDiv{
position:fixed;
_position:absolute;
width:730px;
height:350px;
left:50%;
top:50%;
margin:-175px 0 0 -365px;
background:#fff;
z-index:99;
display:none;
font-size:14px;
}

网站地图xml地图