Question

我目前正在使用Fancybox 2.1.2，想知道如何在我的网络应用程序上创建叠加层。我可以设置弹出窗口的高度和宽度（注意......这不是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;
}

Answer 1

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

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

请参阅操作：http://jsfiddle.net/2VmrG/

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

1 个答案: