I am working on implementing a pop-up screen and I would like to darken the background when it opens. Below is the Javascript 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 = "<img src='" + $(this).text() + "'></img>";
i += "<div>" + $(this).attr("description") + "</div>";
$("#popUpImage").append(i);
});
setPopUpHeight();
$(document).scrollTop(0);
});
});
});
function setPopUpHeight() {
//alert($(document).height());
$("#popUp").height($(document).height());
alert($("#popUp").height());
}
For instance, in one scenario, the height value was 3701 at first and then became 4196 on the second attempt.
Edit: Changed from $(window).height to $(document).height.
Edit: Note that if you uncomment the first alert, the document height will return the correct value on the second try.