javascript - jquery怎样制作一个overlay覆盖层？

Question

在登录、注册、发帖等情况下，需要一个覆盖整个窗口的overlay，不知道该怎样做呢？我的这个不能覆盖完，网页的底部会有一部分不能覆盖，不知道是怎么回事？

<!-- 这个是body的子元素--?>
<p id="ve_modal" style="display: none;position: absolute;left: 0;top: 0;width: 100%;background-color: #000000;opacity: 0.4;z-index: 1000;"></p>

function modal_show()
{
    var html_height=$('html').outerHeight();
    var $modal=$('#ve_modal');
    $modal.height(html_height);
    $modal.show();
}

$('html').on('resize',function()
{
    var html_height=$('html').outerHeight();
    var $modal=$('#ve_modal');
    $modal.height(html_height);
});

情况是这样的：
打开一个网页，然后点击登录按钮，弹出一个overlay覆盖层，结果是网页底部一部分区域没能被覆盖。
打开一个网页，将滚动条拉到最底部，让网页加载完毕，然后再点击登录按钮，这时候overlay就能覆盖整个屏幕。

我给windwow,document,html添加一个resize事件，结果不行。当网页总长度改变后，不知道该怎样改变overlay的高度，让其覆盖整个网页。

Answer 1

你要取当前浏览器可是区域的宽度高度:
document.documentElement.clientWidth
document.documentElement.clientHeight;
并且你要监听窗口的resize事件，当窗口大小发生变化时，调整overlay的宽度高度

Answer 2

CSS 加上height:100%;

Answer 3

默认为弹出框弹出的同时添加覆盖层，直接用一个p把弹出框的包裹起来，设置

请输入代码{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background: rgba(255,255,255,.5)
}

再用jq控制覆盖层的p show()和hide（）
PS:个人做的弹出框是自己写的= = 没有考虑到插件的情况。