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

javascript popup size not increasing dynamically

本文关键字：动态 增加 窗口大小 Javascript      更新时间：2023-09-26

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

我使用了这个脚本:http://www.pat-burt.com/csspopup.js

使用的样式是:

#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()事件

请帮忙，提供一些建议或参考。

Thanks to all

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

出现问题的行如下:

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

和

 43     window_width=window_width/2-150;//150 is half popup's width

在修改后的脚本中，我将这些行改为:

 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     }

和

 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     }

可以使用element。offsetHeight和element。offsetWidth分别获取元素的高度和宽度。问题是，元素需要显示，以便有一个高度和宽度。这就是为什么您必须首先显示它，如果它没有显示，进行所需的测量，并迅速再次隐藏它。它将发生得足够快，以至于用户不会注意到。

一旦你有了这个，那么CSS可以变成(例如):

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

EDIT:我已经更新了代码，以考虑窗口大小的调整。我添加了一个名为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)
}

我还在http://so.savantcoding.com/csspopup/更新了示例。javascript可以在http://so.savantcoding.com/csspopup/csspopup.js

查看
相关文章：