首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >弹出窗口计算高度

弹出窗口计算高度
EN

Stack Overflow用户
提问于 2011-07-10 12:21:13
回答 1查看 396关注 0票数 1

在将弹出的<div>放置在窗口中央的位置时,我遇到了一个问题:

代码语言:javascript
复制
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高度:值,而不是内联高度:auto

更新代码在Nicola之后回答这里是固定代码:

代码语言:javascript
复制
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();
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-07-10 12:46:36

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

代码语言:javascript
复制
var popup = $("#popup"), popupWidth = popup.css("width").replace("px",""), popupHeight = popup.css("height").replace("px","");

var originalHeight = popupHeight;
var originalWidth = popupWidth;

当您重新打开弹出时,将使用原始值而不是实际值。

或者您可以使用数据()来存储和检索

代码语言:javascript
复制
 $('#popup').data('origHeight', popupHeight);
 //the use  $('#popup').data('origHeight') to retrieve it
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6641060

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档