javascript弹出窗口大小不动态增加

我已经创建了一个带有文本框的透明弹出窗口。但是透明窗口的大小是固定的。我想根据显示弹出窗口的html页面增加透明弹出窗口的大小

我使用了以下脚本：

使用的样式为：

#blanket {
    background-color:#111;
    opacity: 0.65;
    filter:alpha(opacity=65);
    position:absolute;
    z-index: 9001;
    top:0px;
    left:0px;
    width:100%;
}
#popUpDiv {
    position:absolute;
    background-color:#eeeeee;
    width:300px;        
    height:300px;
    z-index: 9002;
}

我将此脚本用于onload（）事件

请帮助并提供一些建议或参考

---

多亏了所有的

脚本需要重新编写，以允许动态的popupDiv大小，无论是百分比还是更大的固定值

引起问题的线路有：

 24    popUpDiv_height=blanket_height/2-150;//150 is half popup's height

及

在修改后的脚本中，我将上述行更改为：

 23     var popUpDiv = document.getElementById(popUpDivVar);
 24     
 25     // We have to take popup div's height dynamically
 26     var revertHidden = false
 27     if (popUpDiv.style.display == "none") {
 28         // Since it's hidden, show it first
 29         popUpDiv.style.display = "block"; 
 30         revertHidden = true
 31     }
 32     popUpDiv_height=blanket_height/2 - popUpDiv.offsetHeight/2
 33     if (revertHidden) {
 34         // We have to hide it again
 35         popUpDiv.style.display = "none"
 36     }

及

可以使用和分别获取元素的高度和宽度。事实是，元素需要显示才能具有高度和宽度。这就是为什么如果它没有显示，就必须先显示它，获取所需的测量值，然后再次快速隐藏它。它将发生得足够快，以至于用户不会注意到

一旦你有了它，CSS就可以变成（例如）：

编辑：我已经更新了代码以考虑窗口大小的调整。我添加了一个名为window_resize的函数，在弹出窗口显示时调整窗口大小时调用该函数。我还决定在覆盖任何现有的onresize回调之前，好好地玩一玩，存储它，在我的window_resize函数执行后调用它，并在弹出窗口不再显示时恢复它

function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);

    // Store any previous callback (let's play nice)
    if (window.onresize && window.onresize != window_resize) {
        window_resize.previousCallback = window.onresize;
    }
    // decide if we're going to set window_resize or restore a previousCallback
    var toggledCallback = window.onresize != window_resize ? window_resize : window_resize.previousCallback
    // Set the onresize handler
    window.onresize = toggledCallback
    // set the name of the popupDiv so we can access it from window_resize
    window_resize.popupDiv = windowname;
}

// This wiil handle our resize event
var resizeTimeoutId;
function window_resize(event) {
    window.clearTimeout(resizeTimeoutId);
    resizeTimeoutId = window.setTimeout(function() {
        // resize the blanket
        blanket_size(window_resize.popupDiv);
        // reposition the popup
        window_pos(window_resize.popupDiv);
        // Call the previous onresize callback (if there is one);
        if (window_resize.previousCallback) window_resize.previousCallback.call(window, event);
    }, 10)
}

---

我还更新了上的示例。同样，javascript在

#in stackoverflow中可查看，使文本成为标题：）如果页面大小增加，则覆盖元素大小是固定的，其大小保持不变。因此，只有部分上部被透明弹出窗口覆盖。屏幕的其余部分没有透明部分。请给我一些建议。再次非常感谢您的帮助。@user618130我已经更新了答案，为您提供了总括调整大小、重新定位弹出窗口以及将nice与以前的任何窗口一起放置的功能。onresize处理程序。如果回答了您的问题，请不要忘记选择答案。谢谢Phil。但透明窗口的大小仍然是固定的。当主页的大小增加时，它并没有增加，它只覆盖主页的一些上部。我已复制并尝试，但结果相同。但我有一些调整大小的想法。谢谢您的帮助。@user816130您是说在我链接到的链接中它不工作了吗？我肯定已经解决了调整大小的问题。请重试该页面，我已将GET参数添加到javascript中，以便您的浏览器不会尝试使用缓存版本。@user816130不要忘记选择我的答案，因为它很有用！

 56     // Here we also need popup div's width dynamically
 57     var revertHidden = false
 58     if (popUpDiv.style.display == "none") {
 59         // Since it's hidden, let's show it
 60         popUpDiv.style.display = "block";
 61         // store that it we have to revert to hidden
 62         revertHidden = true;
 63     }
 64 
 65     // here we use offsetWidth
 66     window_width=window_width/2- popUpDiv.offsetWidth/2
 67     // if it was originally hidden, hide it again
 68     if (revertHidden) {
 69         popUpDiv.style.display = "none";
 70     }

#popUpDiv {
    position:absolute;
    background-color:#eeeeee;
    /* Notice we're using a percentage for the height and width */
    width:50%;
    height:50%; 
    z-index: 9002;
}

function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);

    // Store any previous callback (let's play nice)
    if (window.onresize && window.onresize != window_resize) {
        window_resize.previousCallback = window.onresize;
    }
    // decide if we're going to set window_resize or restore a previousCallback
    var toggledCallback = window.onresize != window_resize ? window_resize : window_resize.previousCallback
    // Set the onresize handler
    window.onresize = toggledCallback
    // set the name of the popupDiv so we can access it from window_resize
    window_resize.popupDiv = windowname;
}

// This wiil handle our resize event
var resizeTimeoutId;
function window_resize(event) {
    window.clearTimeout(resizeTimeoutId);
    resizeTimeoutId = window.setTimeout(function() {
        // resize the blanket
        blanket_size(window_resize.popupDiv);
        // reposition the popup
        window_pos(window_resize.popupDiv);
        // Call the previous onresize callback (if there is one);
        if (window_resize.previousCallback) window_resize.previousCallback.call(window, event);
    }, 10)
}