$(document).height returns incorrect height the first time, correct the second time
<p>I am trying to put a pop up screen, and I want to darken the background when pop up opens.
This is the Javascript.</p>

<pre><code>$(document).on('click', '.item', function(){
        $("#popUp").css("display" , "block");
        var divId = $(this).attr("id");
        $.get('portfolio/portfolio.xml', function(file){
            $(file).find('item').filter(function() {return $(this).attr("id") == divId;}).each(function(){
                var $item = $(this);
                var name = $item.find("name");
                var description = $item.find('description'); 
                $("#popUpName").html(name.text()) ;
                $("#popUpDescription").html(description.text());
                var im; var n=0;
                $item.find('image').each(function() {
                    var i = "&lt;img src='" + $(this).text() + "'&gt;&lt;/img&gt;";
                    i += "&lt;div&gt;" + $(this).attr("description") + "&lt;/div&gt;";
                    $("#popUpImage").append(i);
                });
                setPopUpHeight();
                $(document).scrollTop(0);
            });
        }); 
    });

    function setPopUpHeight() {
            //alert($(document).height());
            $("#popUp").height($(document).height());
            alert($("#popUp").height());
    }
</code></pre>

<p>For example: In one case the first time the value is 3701, the second time it's 4196.</p>

<p>Edit: $(document).height, changed from $(window).height.<br>
Edit: I should add that if uncomment the first alert, the second time document.height returns the right value.</p>