<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>
效果图：
你是用a标签来实现点击出现弹出层的效果的吧~如果设置超链接为"#"，默认点击后就会跳转到页面顶部了。一般有两个方法，一个是设置超链接为"###"，例如下面这样：<a href="###" id="btn">按钮</a>
第二种方法是用JS来阻止超链接，例如下面这样：
<a href="javascript:void(0)" id="btn">按钮</a>
<style>html,body {margin:0 padding:0 width:100% height:100% font-size:36px}
#bak {display:none position:fixed left:0 top:0 width:100% height:100% background-color:rgba(0,0,0,0.5)}
#box {position:absolute left:50% top:50% width:400px height:240px margin-left:-200px margin-top:-120px background-color:#fff}
</style>
<span id="s1">10</span>秒后会自动弹出层
<div id="bak">
<div id=box>
<span id="s2">20</span>秒后会自动关闭层
</div>
</div>
<script>
$(function(){
var s=10
function showLayer(){
setTimeout(function(){
$("#s1").text(--s)
if(s){
showLayer()
}else{
$("#bak").show()
s=20
function hideLayer(){
setTimeout(function(){
$("#s2").text(--s)
if(s){
hideLayer()
}else{
$("#bak").hide()
}
},1000)
}
hideLayer()
}
},1000)
}
showLayer()
})
</script>
如果不需要计数，那就很简单了（只列出js代码了）：
<script>$(function(){
setTimeout(function(){
$("#bak").show()
setTimeout(function(){
$("#bak").hide()
},20000)
},10000)
})
</script>
