首页 > jquery怎样制作一个overlay覆盖层?

jquery怎样制作一个overlay覆盖层?

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

<!-- 这个是body的子元素--?>
<div id="ve_modal" style="display: none;position: absolute;left: 0;top: 0;width: 100%;background-color: #000000;opacity: 0.4;z-index: 1000;"></div>
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的高度,让其覆盖整个网页。


CSS 加上height:100%;


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

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

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


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

【热门文章】
【热门文章】