javascript - jQuery .height() 无法正常运行

Question

我正在尝试将模态窗口居中放置在屏幕上(完全可以正常工作)，除了当我通过 jQuery 向其添加内容然后将其宽度和高度居中时，它始终将高度输出为0 而不是它的预期高度。这是我的代码:

        // Now to use the Data and add it to the Modal Window...
        $('#portfolioModal .inner .data').html('<h1>' + parsedData['name'] + '</h1>\n' + parsedData['desc'] + '');

        var modalWidth = $('#portfolioModal').width(); // Get the Modal Window's Width
        var modalHeight = $('#portfolioModal').height(); // Get the Modal Window's Height

        alert(modalHeight);

        var left = (windowWidth / 2) - (modalWidth / 2); // Calculate the left margin for center alignment
        var top = (windowHeight / 2) - (modalHeight / 2); // And calculate the top margin for center alignment

        $('#portfolioModal').css({ // Append the Left and Top margin to the Modal Window
            'left': left,
            'top': top
        });

模态 HTML:

        <div id="portfolioMask">
                    <div id="portfolioModal">
                                <div class="inner">
                                            <div id="portfolioModalClose">Close</div>
                                            <span class="data"></span>
                                </div>
                    </div>
        </div>

感谢任何帮助!

Answer 1

如果在启动 jQuery height() 时隐藏了 div (display:none) - 它总是会返回 0 的高度。我相信这是因为它实际上并没有占用空间在您的页面上 - 这意味着如果不显示它就不是页面的一部分。如果您想隐藏 div，但又想获得高度，我建议使用以下 CSS:

position:absolute;
visibility: hidden;

使用 visibility hidden 会使元素占用 dom 中的空间，但不会使其可见 - 因此它会有一个高度。使用绝对位置会将其从您的实际页面中弹出，因此它不会强制您页面上的内容被其高度/宽度插入。

我个人也喜欢加一个

left: -30000px;

我发现一些较旧的 IE 不能很好地解决此问题，将 div float 到页面之外可确保它们不可见。