Question

我正在使用jquery在div上放置一个叠加，而我正在等待我的服务器返回到我自动转到的json表（有两个选项卡，当你在一个表上执行ajax发布时，一个表是使用服务器响应中的JSON数据创建的。

这似乎工作得很好。
但是，当我调整屏幕大小时，叠加层保持相同的大小那不好。

当有人收缩或扩展窗口时，叠加div需要调整大小我尝试过几个不同的东西，包括在这里发布堆栈溢出。

另外，我尝试将div叠加的大小附加到叠加功能中的$(window).resize函数。

基本上将top，left，width和height css属性设置为div.outerWidth()，outerHeight()，left ，top属性。

这似乎不起作用。

有什么想法吗？

我所做的CODE

        $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.offset().width,
        height : $div.outerHeight(),
        background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo('body');

正如你所看到的，我几乎在javascript函数中完成了所有的css工作。我想我可以像你们建议的那样在样式表中完成所有css的东西，然后将我的div添加到DOM中。我试试看。

Answer 1

在叠加div上使用width: 100%;和height: 100%;。

宽度不是问题，可以正常工作。
高度稍微有些棘手，因为它需要具有叠加div的父级才能具有已知宽度。因此，假设overlay div是body的直接子项，则需要以下内容：

html, body {
    height: 100%;
}

然后在叠加div。

另一种可能性是在div上设置以下内容：

.overlay {
    position: fixed;
    background: rgba(0,0,0,0.2);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<强> Here's an Example

请注意，position: fixed无法与移动设备配合使用。

Answer 2

纯HTML / CSS解决方案怎么样？

<div id="overlay"></div>

<style type="text/css">
  #overlay {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;

      background: #000000;
      background: rgba(0, 0, 0, 0.5);
  }
</style>

（对于支持和不支持css3的设备，background属性被指定两次;仅显示。）

Answer 3

用于叠加：把它放在DOM的根目录中，你不使用overflow：hidden，例如在body标签之后

body: position: relative
overlay: position: absolute, width: 100%, top:0, left: 0

和高度脚本：

$('overlay-selector').height($(document).height())

CSS的100％高度意味着$（window）.height（），所以你需要使用脚本。

Answer 4

好的答案伙伴堆栈溢出爱好者。我最近解决了这个问题，只需将叠加层附加到正确的div而不是试图将它覆盖在div上然后计算尺寸......这就是我所做的。我会指出一个微妙的变化。

function MRNSearchInternals()
{
    //debugger;
    var form = $("#MRNSearch");
    $div = $("#TabView1");
    var srlzdform = form.serialize();
    var PopID = <% =PopID %>;
    var options = [];
    var $url = $("#target").attr("action");
    $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.outerWidth(),
        height : $div.outerHeight(),
        background: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo($div);    

    $("#overlay").fadeIn();
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {                   
        DisplayDemographicSearch(data);
        $("#overlay").fadeOut('slow', function () {
             $("#overlay").remove();
        });
    });
}

以前，我将叠加div附加到'body'。现在我将它附加到我之前抓住的div ... $ div ...我知道为什么这样可行，但叠加现在随着窗口大小而增长和缩小。对那些家伙的任何见解？不仅解决了这个问题，我还是很高兴，但我想了解为什么问题也解决了，所以下次我可以做出更明智的决定。感谢您的所有评论。

调整页面大小时调整div的大小

4 个答案: