html js css遮罩层代码,js 遮罩层效果代码

DIV CSS遮罩层

function showdiv() {

document.getElementById("bg").style.display ="block";

document.getElementById("show").style.display ="block";

}

function hidediv() {

document.getElementById("bg").style.display ='none';

document.getElementById("show").style.display ='none';

}

#bg{

display: none;

position: absolute;

top: 0%; left: 0%;

width: 100%;

height: 100%;

background-color:black;

z-index:1001;

-moz-opacity:

0.7; opacity:.70;

filter: alpha(opacity=70);

}

#show{

display: none;

position: absolute;

top: 25%; left: 22%;

width: 53%;

height: 49%;

padding: 8px;

border: 8px solid #E8E9F7;

background-color: white;

z-index:1002;

overflow: auto;

}

测试

《纯Javascript实现div遮罩层效果》

var js = document.getElementsByTagName('script');

var jspath = js[js.length-1].src.substring(0,js[js.length-1].src.lastIndexOf("/")+1);//自动获取js的路径

var iframediv = {

id:Math.random(),

show:function(param) {

var p = document.createElement('DIV');

p.id=this.id;

var scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;

var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

p.style.cssText = "z-index:999999;width:"+scrollWidth+"px;height:"+scrollHeight+"px;position:absolute;left:0;top:0;background-color:black;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;";

document.body.appendChild(p);

var p1=document.createElement("DIV");

p1.id="box"+this.id;

p1.style.cssText = "z-index:9999999;width:600px;position:absolute;top:0;left:50%;margin-left:-300px;border:10px solid #3b5999;border-style:outset;background-color: white;";

document.body.appendChild(p1);

p1.innerHTML = '

×

';

this.iframescroll();

},

iframescroll:function() {

if(!document.getElementById("box"+this.id) ) return;

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

document.getElementById("box"+this.id).style.top = parseInt(clientHeight*0.08) + parseInt(scrollTop)+"px";

},

close:function(){

document.body.removeChild(document.getElementById("box"+this.id));

document.body.removeChild(document.getElementById(this.id));

}

}

if( window.addEventListener) {

window.addEventListener('scroll',function(){ iframediv.iframescroll(); },false);

} else if(window.attachEvent) {

window.attachEvent('onscroll',function(){ iframediv.iframescroll(); });

}

window.closeIframediv = function(){ iframediv.close(); };

window.showDiv = function(param){ iframediv.show(param); };