jQuery 如何使用动态 HTML 将 Fancybox 高度和宽度设置为百分比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13080478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set Fancybox Height and Width as a Percentage with Dynamic HTML?
提问by Jason Biondo
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.
我目前正在使用 Fancybox 2.1.2，想知道如何在我的 Web 应用程序上创建叠加层。我可以设置弹出窗口的高度和宽度（注意...这不是 iframe）并且它将使用静态值进行调整，但我希望能够将高度设置为动态值，例如 80%。不过，我似乎无法让它发挥作用。当我加载没有设置高度或宽度的fancybox时，我得到了这个非常小的灯箱，并且它没有达到高度的600px和宽度的800px的默认值。这是因为我通过 content 方法动态添加了灯箱的 HTML 吗？我还在灯箱加载完成后动态添加内容。目标是为我的应用程序创建一个完整的叠加层，并将高度设置为百分比。
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:
我的 CSS 是：
.light_box.upload{
width: 980px;
}
回答by Janis
Yes, you can turn off "autoSize" and then set width as "auto":
是的，您可以关闭“autoSize”，然后将宽度设置为“auto”：
$.fancybox.open({
content : '<div id="test">Lorem ipsum dolor sit ame</div>',
autoSize : false,
width : "auto",
height : "80%"
});?
See in action: http://jsfiddle.net/2VmrG/
