弹出窗口计算高度

Popup window working out the height

本文关键字：高度 计算 窗口      更新时间：2023-09-26

我有一个问题，我的位置弹出<div>在窗口的中心使用:

var popup = $("#popup"), popupWidth = popup.css("width").replace("px",""), popupHeight = popup.css("height").replace("px","");
    var xPosition = ($(window).width() - popupWidth) / 2;
    var yPosition = (($(window).height() - popupHeight) / 2) + $(window).scrollTop();
    if (yPosition <= 0){
        yPosition = '0'; 
    } else if(yPosition <= $(window).scrollTop()){
        yPosition = $(window).scrollTop();
    } else {
        yPosition = yPosition - 68; //minus top shaddow height
    }           
    if (xPosition >= $('body').offset().left) {
        xPosition = xPosition;
    } else {
        xPosition = '0';
    }
    $(popup).css({
        'top': yPosition + 'px',
        'left': xPosition + 'px',
        'display' : 'block',
        'height' : 'auto'
    }).addClass("popup-open");

我遇到的问题是，在第一次加载时，弹出框的高度被返回为0，因为它是隐藏的，直到上面的位置已经计算出来。为了解决这个问题，我通过CSS设置了默认高度，然后一旦弹出窗口显示，我将其覆盖为auto。

现在的问题是，如果弹出窗口已经关闭并重新打开高度是自动的。有没有办法在样式表中找到CSS height:value而不是inline height:auto

<<p> 更新代码/strong>以下是Nicola的回答，这里是固定代码: 
var popup = $("#popup"), popupWidth = popup.css("width").replace("px",""), popupHeight = popup.css("height").replace("px","");
// Save/Get original height
if(popupHeight == "auto"){
    popupHeight = popup.data('origHeight');
} else {
    popup.data('origHeight', popupHeight);
}
var xPosition = ($(window).width() - popupWidth) / 2;
var yPosition = (($(window).height() - popupHeight) / 2) + $(window).scrollTop();

为什么不将原始值保存在变量中呢?

var popup = $("#popup"), popupWidth = popup.css("width").replace("px",""), popupHeight = popup.css("height").replace("px","");
var originalHeight = popupHeight;
var originalWidth = popupWidth;

当您重新打开弹出窗口时，您使用原始值而不是实际值

或者您可以使用use data()来存储和检索它

 $('#popup').data('origHeight', popupHeight);
 //the use  $('#popup').data('origHeight') to retrieve it
相关文章：