代码：【复制】 【运行】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img{
border:1px solid red;
display:block;
height:50px;
width:50px;
}
</style>
<title>DIV弹出层</title>
</head>
<body>
<div>123 <input type='button' value='lock' onclick='show();'/></div>
</body>
</html>
<script type="text/javascript">
<!--
//弹出层
function show() {
lock();
var divLayer = document.getElementById('divLan');
if (divLayer) {
divLayer.style.display = 'block';
var arr = divLayer.getElementsByTagName('div');
for (var i = 0; i < arr.length; i++) {
arr[i].style.display = 'block';
}
} else {
divLayer = document.createElement('div');
divLayer.id = 'divLan';
divLayer.innerHTML = 'Hello World <input type="button" value="Close" onclick="DivClose()"/>';
divLayer.style.marginLeft = 'auto';
divLayer.style.marginRight = 'auto';
divLayer.style.width = '300px';
divLayer.style.height = '300px';
divLayer.style.backgroundColor = 'white';
divLayer.style.color = '#9b0000';
divLayer.style.fontWeight = 'bold';
divLayer.style.fontSize = '20px';
divLayer.style.zIndex = parseInt(document.getElementById('divLock').style.zIndex)+1;
divLayer.style.position = 'relative';
document.body.appendChild(divLayer);
}
}
function DivClose() {
var divLayer = document.getElementById('divLan');
var divLock = document.getElementById('divLock');
if (divLayer) {
divLayer.style.display = 'none';
divLock.style.display = 'none';
}
}
//遮盖层
function lock() {
var divLock = document.getElementById('divLock');
if (divLock) {
divLock.style.display = 'block';
}
else {
divLock = document.createElement('div');
divLock.id='divLock';
divLock.style.width = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth)+'px'
divLock.style.height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)+'px';
//如果是IE浏览器
if(document.all) {
divLock.style.height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight,document.documentElement.clientHeight)+'px';
}
//divLock.style.lineHeight=divLock.style.height;
divLock.style.verticalAlign = 'middle';
divLock.style.position = 'absolute';
divLock.style.backgroundColor = 'black';
divLock.style.filter = 'alpha(Opacity=40)';
divLock.style.top = '0px';
divLock.style.left = '0px';
divLock.style.opacity = ' 0.4';
divLock.style.zIndex = '1';
document.body.appendChild(divLock);
}
}
//-->
</script>