Fancybox内联没有滚动条，并且是100％且已“修复" [英] Fancybox inline to have no scrollbars and be 100% and 'fixed'

问题描述

不确定如何解释，但是去了:

Not sure how to explain this, but here goes:

我不想让Fancybox在页面上打开一个可以在其中具有滚动条以查看溢出内容的框"，而是希望该内容仅位于当前/父内容的顶部.

Instead of Fancybox opening a 'box' on the page which can have a scroll bar inside it to view overflow content, I want the content to just sit on top of the current / parent content.

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

So, at the moment, if the browser inner width was 800px and you were opening content that needed 1200px height, then the Fancybox 'box' height can be set at 800px and a scrollbar is used to scroll the content of the new 'box' (as the content is 1200px). I want to do it so there is no new scrollbar, but the new content is the full 1200px which pushes the main/parent page down (forcing a scroll bar on the parent if none already existed).

单击关闭按钮仍将其关闭.

Clicking the close button would still close it.

这可能吗?我有道理吗?

Is this possible? Do I make sense?

这是针对FancyBox 2的.

This is for FancyBox 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的尺寸.

NOTES: You cannot set specific dimensions to images, they will be either full size (when fitToView is set to false) or scaled to the viewport (when fitToView is set to true); the other types of content can be adjusted to the dimensions of width and height as in the code above.

提示:您可以打开不同类型的内容(或定位不同的内容)，每个内容具有不同的高度，并使用HTML5 data-*属性来动态更改fancybox的height ....因此为此HTML:

TIP : you may open different type of content (or target different contents) with different heights each and change the height of fancybox dynamically using the HTML5 data-* attribute .... so for this 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的值

then add the callback beforeShow to your script to get the value of data-height like this

$(".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内联没有滚动条，并且是100％且已“修复"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！