的fancybox内嵌有没有滚动条和为100%,并且“固定”(Fancybox inline to

2019-09-22 10:28发布

不知道如何解释这一点,但这里有云:

而不是打开的fancybox可以有一个滚动条里面它来查看溢出的内容页面上的“盒子”,我想要的内容,只是坐在电流/父内容的顶部。

所以,此刻,如果浏览器内部宽度为800像素,你被打开,那么的fancybox“盒子”的高度可在800像素设置和滚动条用于滚动新的“盒子”的内容需要1200像素高含量(作为内容是1200像素)。 我想这样做,所以没有新的滚动条,但新的内容是完整的1200像素,其推动主/父页面下(迫使滚动条上的父母如果没有已经存在)。

单击关闭按钮仍然会关闭它。

这可能吗? 难道我有意义吗?

这是2的fancybox。

Answer 1:

因此,对于这个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 ); 的其他类型的内容可以被调整以的尺寸widthheight作为在上面的代码。

提示 :你可能会打开不同类型的内容(或目标不同的内容)具有不同高度的各个和改变height的fancybox动态使用HTML5的data-*属性....所以这个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");
 }
});


文章来源: Fancybox inline to have no scrollbars and be 100% and 'fixed'