Question

I am trying to center a Modal Window on the screen (Which works completely fine), apart from when I’m adding content to it via jQuery and THEN getting it’s width & height to center, it will always output the height as 0 instead of it’s intended height. Here’s my code:

        // 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
        });

Modal HTML:

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

Any help is appreciated!

Answer 1

If the div is hidden (display:none) when you fire the jQuery height() – it will always return a height of 0. I believe this is due to it not actually taking up space on your page – meaning its not really a part of it without being displayed. If you want to keep the div hidden, but want to get the height I recommend using the following CSS:

position:absolute;
visibility: hidden;

Using visibility hidden will make the element take up space in the dom but keep it from being visible – so it will have a height. Using position of absolute will pop it out of your actual page, so its not forcing content on your page to get pushed around by its height / width.

I personally also like to add a

left: -30000px;

I’ve found that some older IE’s don’t play well with this work around and floating the divs off the page ensures they’re not visible.