<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>
效果图：
这是因为你得弹出曾没有覆盖页面全部地方，把弹出层的位置设置为fixed，然后宽度和高度都设置为100%，至于iframe可以放置在中间合适的地方。当鼠标点击发生的内层对象即没有处理也没有取消这个事件的时候，事件会向上冒泡知道有人处理为止。所以这可能就是点在空白部分后点到下面去了原因。解决办法有很多，你可以尝试在你的层里面捕获这个事件并取消冒泡，看看event.cancelBubble或者event.stopPropagation哪个可以生效，另外也可以尝试让弹出层所有地方都变得有内容，比如使用div填充到空白的地方覆盖整个屏幕。
你是用a标签来实现点击出现弹出层的效果的吧~如果设置超链接为"#"，默认点击后就会跳转到页面顶部了。一般有两个方法，一个是设置超链接为"###"，例如下面这样：<a href="###" id="btn">按钮</a>
第二种方法是用JS来阻止超链接，例如下面这样：
<a href="javascript:void(0)" id="btn">按钮</a>
