如何使div覆盖没有固定位置的浏览器视口？

Question

Please, no "fixed" solutions... It does not work in IE8 in quirks mode, but this is what I need. 请，没有“固定”的解决方案...它在怪癖模式下的IE8中不起作用，但这就是我所需要的。

I write this JS: 我写这个JS：

function isNumber(n)
{
    return !isNaN(parseFloat(n)) && isFinite(n);
}

function getHighestZIndexIn(start_elem, include_static_elems)
{    
    var curr_elem = start_elem ? start_elem : document.body;
    var current_highest = curr_elem.style.zIndex;

    for (var i = 0; i < curr_elem.children.length; i++)
    {
        if (!include_static_elems && (!curr_elem.children[i].style.position || curr_elem.children[i].style.position.toLowerCase() == "static"))
            continue;

        var temp_highest = getHighestZIndexIn(curr_elem.children[i]);

        if (!isNumber(temp_highest))
            continue;

        if (!isNumber(current_highest))
        {
            current_highest = temp_highest;
            continue;
        }

        if (current_highest < temp_highest)
            current_highest = temp_highest;
    }

    return current_highest;
}

function createPopupPanel(header, with_content, header_color, tbl_bg_color)
{
    var hzi = getHighestZIndexIn(null, true);
    hzi = hzi ? hzi + 1 : 1;
    var div_id = "temp_div_" + new Date().getTime();

    var bg_div = document.createElement("div");
    bg_div.style.position = "absolute";
    bg_div.style.zIndex = hzi;
    bg_div.id = div_id;
    bg_div.style.width = bg_div.style.height = "100%";
    try { bg_div.style.backgroundColor = "rgba(100, 100, 100, 0.5)"; }
    catch (exc) { bg_div.style.backgroundColor = "gray"; } //ie6, ie7, ie8 fix
    bg_div.style.left = bg_div.style.right = bg_div.style.top = bg_div.style.bottom = "0px";

    var main_div = document.createElement("div");
    main_div.style.position = "absolute";
    main_div.style.width = main_div.style.height = "80%";
    main_div.style.left = main_div.style.right = main_div.style.top = main_div.style.bottom = "10%";

    var table = "<table cellspacing = '0' cellpadding = '0' style = 'width: 100%; height: 100%'>";
    table += "<tr><td style = 'background-color: " + header_color + ";'>" + header + "</td><td style = 'cursor: pointer; background-color: red; width: 1px; height: 1px;' onclick = \"document.body.style.overflow = 'auto'; document.body.removeChild(document.getElementById('" + div_id + "'));\">Close</td></tr>";
    table += "<tr><td colspan = '2' style = 'background-color: " + tbl_bg_color + ";'>" + "<div style = 'position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%;'><div id = '" + div_id + "_content_container' style = 'position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto;'>" + with_content + "</div></div>" + "</td></tr>";
    table += "</table>";

    main_div.innerHTML = table;
    bg_div.appendChild(main_div);

    document.body.style.overflow = "hidden";
    document.body.appendChild(bg_div);

    return div_id + "_content_container";
}

And this test page: 而这个测试页：

<html>
    <head>
        <title>test ppanel</title>
        <script type = "text/javascript" src = "libs/ppanel.js"></script>
    </head>

    <body>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
    </body>
</html>

在此处输入图片说明 Then I press any button and the panel appears at the page top. 然后按任意按钮，面板出现在页面顶部。

Is there any way I can place my div right at viewport and make it dynamically change it's size at window resizes? 有什么办法可以将div正确地放置在视口中，并使其在更改窗口大小时动态更改其大小？

Answer 1

There is a way. 有一种方法。 I usually achieve this with jquery using: 我通常使用以下方法通过jquery实现此目的：

  $(window).width() //to get window width
  $(window).height() // to get window height
  $('#id').width(val) // to change the width accordingly

For positioning I use a display:absolute in css changing 对于定位，我使用display：css更改中的绝对值

  $('#id').css('left',$(window).width*percentage); //as an example

usually for the top property you have to consider other elements unless you just want it on top All of this code must run under a 通常对于top属性，除非您只希望将其放在顶层，否则您必须考虑其他元素。所有这些代码都必须在

   $(window).resize(function(){
        //to get new window dimensions
         var windowwidth = $(window).width();
         var windowheight = $(window).height();
       //resizing code
   });

Answer 2

If, during the pop up, the background stays static, ergo no elements are appended or changed. 如果在弹出过程中背景保持静态，则不会附加或更改任何元素。 You can use this: 您可以使用此：

 //store window scroll values
 var storeScroll = [document.body.scrollLeft, document.body.scrollTop]; //x, y
 document.body.style.overflow = "hidden";
 window.scrollTo(0, 0);

 //when the pop is closed revert back to scroll position
 window.scrollTo(storeScroll[0], storeScroll[1]);
 document.body.style.overflow = "auto";

如何使div覆盖没有固定位置的浏览器视口？

问题描述

2 个解决方案

解决方案1
1 2014-12-27 21:06:41

解决方案2
1 已采纳 2014-12-27 21:06:50

如何使div覆盖没有固定位置的浏览器视口？

问题描述

2 个解决方案

解决方案1 1 2014-12-27 21:06:41

解决方案2 1 已采纳 2014-12-27 21:06:50

解决方案1
1 2014-12-27 21:06:41

解决方案2
1 已采纳 2014-12-27 21:06:50