2
3
4
5
6
7
8
9
10
11
12
13
给按钮添加一个点击事件，填出一个层，宽高都为100%；
<body>
<input type="button" value="xxx" id="btn" />
<div id="div1" style="display:none"></div>
</body>
<script>
var oBtn = document.getElementById('btn')
var oDiv = document.getElementById('div1')
oBtn.onclick=function(){
oDiv.style.cssText = 'position:absolutetop:0pxleft:0pxwidth:100%height:100%z-index:10background:#cccdisplay:block'
}
</script>
这样就实现了，点击按钮弹出一个层。
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block'
document.getElementById('bg').style.display='block'
}
function closeDiv(){
document.getElementById('popDiv').style.display='none'
document.getElementById('bg').style.display='none'
}
</script>
<div id="popDiv" style="z-index:99display:noneposition:absolutemargin-top: 20%margin-left: 40%background-color: #FFF">
<h3>这里的html自己写，样式什么的自定义</h3>
<form action="#">
<p><span>账号：</span><input type="text"></p>
<p><span>密码：</span><input type="password"></p>
</form>
<br/>
<a href="javascript:closeDiv()">关闭遮罩层</a></div>
<div id="bg" style="display:nonebackground-color: #cccwidth: 100%position:absoluteheight: 100%opacity: 0.5z-index: 1"></div>
<div style="padding-top: 10%padding-left:40%z-index:1">
<input type="Submit" name="" value="打开遮罩层" onclick="javascript:showDiv()" />
</div>
效果图：
