如何使用动态 HTML 将 Fancybox 高度和宽度设置为百分比？答案

【问题标题】：How do I set Fancybox Height and Width as a Percentage with Dynamic HTML?如何使用动态 HTML 将 Fancybox 高度和宽度设置为百分比？
【发布时间】：2012-10-26 03:51:29
【问题描述】：

我目前正在使用 Fancybox 2.1.2，想知道如何在我的 Web 应用程序上创建叠加层。我可以设置弹出窗口的高度和宽度（注意...这不是 iframe），它将使用静态值进行调整，但我希望能够将高度设置为动态值，例如 80%。我似乎无法让它工作。当我加载没有设置高度或宽度的fancybox时，我得到了这个非常小的灯箱，它没有达到默认值600px的高度和800px的宽度。这是因为我通过内容方法动态添加了灯箱的 HTML 吗？我还在灯箱加载完成后动态添加内容。目标是为我的应用程序创建一个完整的覆盖，并将高度设置为百分比。

目前的代码是：

$.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>'
});

我的 CSS 是：

.light_box.upload{
    width: 980px;
}

【问题讨论】：

标签： jquery fancybox overlay

【解决方案1】：

是的，您可以关闭“autoSize”，然后将宽度设置为“auto”：

$.fancybox.open({
    content  : '<div id="test">Lorem ipsum dolor sit ame</div>',
    autoSize : false,
    width    : "auto",
    height   : "80%"
});

实际操作：http://jsfiddle.net/2VmrG/

【讨论】：

这对我不起作用...但是这样做是像这样添加您的最大高度和宽度...<a .... data-width="1140" data-height="760">该库处理较小设备上的大小调整。