0

不知道如何解释这一点，但这里有：

我希望内容位于当前/父内容之上，而不是 Fancybox 在页面上打开一个可以在其中包含滚动条以查看溢出内容的“框”。

因此，目前，如果浏览器内部宽度为 800px，而您正在打开需要 1200px 高度的内容，则 Fancybox 'box' 高度可以设置为 800px 并使用滚动条来滚动新 'box' 的内容（因为内容是1200px）。我想这样做，所以没有新的滚动条，但新内容是完整的 1200 像素，它将主/父页面向下推（如果不存在，则在父页面上强制滚动条）。

单击关闭按钮仍将关闭它。

这可能吗？我说得有道理吗？

这适用于 FancyBox 2。

4

1 回答 1

2

所以对于这个html

<a class="fancybox" href="{target content}">open content at 1200px height</a>

使用这个脚本

$(".fancybox").fancybox({
 type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
 width: 800, // or whatever
 height: 1200,
 autoSize : false, // so the size will be 800x1200
 autoCenter: false, // so fancybox will scroll down if needed
 fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
 scrolling : "no" // so no scroll bars inside fancybox
});

注意：您不能为图像设置特定尺寸，它们将是全尺寸（当fitToView设置为时false）或缩放到视口（当fitToView设置为时true）；其他类型的内容可以根据上面代码的大小进行width调整height。

提示：您可以打开具有不同高度的不同类型的内容（或定位不同的内容），并height使用 HTML5data-*属性动态更改 fancybox .... 所以对于这个 html：

<a class="fancybox" href="{target content 01}" data-height="1200">open content 01 at 1200px height</a>
<a class="fancybox" href="{target content 02}" data-height="1000">open content 02 at 1000px height</a>
<a class="fancybox" href="{target content 03}" data-height="1450">open content 03 at 1450px height</a>

然后将回调添加beforeShow到您的脚本以获得这样的data-height值

$(".fancybox").fancybox({
 type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
 width: 800, // or whatever
 // height: 1200, // no fixed height but obtained dynamically
 autoSize : false, // so the size will be 800x1200
 autoCenter: false, // so fancybox will scroll down if needed
 fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
 scrolling : "no", // so no scroll bars inside fancybox
 beforeShow : function(){
  this.height = $(this.element).data("height");
 }
});
于 2012-09-15T07:35:43.190 回答