I'm currently using Fancybox 2.1.2 and would like to know how I can create an overlay on my web application. I can set the height and width of the the popup (note... this is not an iframe) and it will adjust with static values, but I would like to be able to set the height to a dynamic value like 80%. I can't seem to get this to work though. When I load fancybox with no height or width set I get this really small lightbox and it does not go to the default values of 600px for height and 800px for width. Is this because I am adding in the HTML for the lightbox dynamically through the content method? I am also adding in content dynamically after the lightbox is done loading. The goal is to create a full overlay for my app with setting height as a percentage.
The current code is:
$.fancybox.open({
'content' : '\
<div class="light_box upload">\
<div class="title">Your Photos of '+city+'</div>\
<div>\
<div class="uploadifive-queue" id="uploadifive-upload_photo-queue"></div>\
</div>\
</div>'
});
And my CSS is:
.light_box.upload{
width: 980px;
}