Question

请不要“修复”解决方案......在怪癖模式下它在IE8中不起作用，但这就是我需要的。

我写这个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";
}

这个测试页面：

<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>

enter image description here 然后我按任意按钮，面板出现在页面顶部。

有什么方法可以将我的div放在viewport上，并在窗口调整大小时动态改变它的大小？

Answer 1

有一种方法。我通常使用jquery来实现这个：

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

对于定位我使用显示：绝对在css中更改

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

通常对于顶级属性，您必须考虑其他元素，除非您只是想要它在顶部所有这些代码都必须在

下运行

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

Answer 2

如果在弹出窗口期间，背景保持静止，则不会添加或更改任何元素。你可以用这个：

 //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 个答案: