Question

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

我使用过这个脚本： 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（）事件

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

感谢所有

Answer 1

需要重新编写脚本以允许动态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;
}

编辑：我已更新代码以考虑窗口大小调整。我添加了一个名为window_resize的函数，在显示popUp时调整窗口大小时调用该函数。我还决定玩好并存储任何现有的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

查看

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

1 个答案: