js 遮罩層效果代碼

時間 2019-12-07

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">javascript

<html xmlns="http://www.w3.org/1999/xhtml">css

<head>html

<title>DIV CSS遮罩層</title>java

function showdiv() {dom

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

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

}測試

function hidediv() {this

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

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

}

</script>

#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;

}

</style>

</head>

<body>

<div id="show">測試

</div>

</body>

</html>

《純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 = '<div><a style="position:absolute;right:10px;top:10px;height:20px;width:20px;background-color:#DDDDDD;" href="javascript:closeIframediv()" title="close"><font size="4">×</font></a><iframe width="600" height="490" marginWidth=0 marginHeight=0 frameBorder=0 width="100%" scrolling="no" allowTransparency="true" src="' + param +'"></iframe></div>';

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);