以大内容（宽度）显示 Fancybox3答案

【问题标题】：Display Fancybox3 with large content (width)以大内容（宽度）显示 Fancybox3
【发布时间】：2018-02-11 11:04:02
【问题描述】：

我对fancybox3 有疑问。如果您有更大的内容宽度，例如2500px，框的显示不正常。要查看这个花式框，您必须向下滚动。

这是我的代码：

<div style="height: 800px;">
  <a data-fancybox data-src="#hidden-content" href="javascript:;">
      Trigger the fancyBox width 500px;
  </a>
  <br>
  <a data-fancybox data-src="#hidden-content2" href="javascript:;">
      Trigger the fancyBox width 2500px;
  </a>
</div>

<div style="display: none;" id="hidden-content">
    <h2>Hello</h2>
  <div style="width: 500px;">
  ... some stuff ...
  </div>
</div>

<div style="display: none;" id="hidden-content2">
    <h2>Hello</h2>
  <div style="width: 2500px;">
  ... some more stuff ...
  </div>
</div>

我有一个解决这个问题的代码笔。有任何想法吗？ https://codepen.io/anon/pen/EQmgjK

【问题讨论】：

为什么不使用autoDimensions: true选项根据内容大小自动调整
@MuhammadOmerAslam：我试过这个选项，但它不起作用。我也没有在文档中找到这个选项：fancyapps.com/fancybox/3/docs

标签： javascript jquery width fancybox-3

【解决方案1】：

fancyBox 使用内联块技巧进行垂直和水平居中。这是以未知为中心的最佳选择，但不幸的是有一些缺点。通过强制使用超宽内容，您正在破坏它。

您有多种选择，例如：

使内容可滚动：

#hidden-content2 {
  max-width: calc(100% - 80px);
  overflow: auto;
}

https://codepen.io/anon/pen/vdmyRo

隐藏伪元素

.fancybox-slide.wide:before {
    display: none;
}

（您可以通过设置data-slide-class="wide"属性来设置自定义类名）

https://codepen.io/anon/pen/vdmydo?editors=1100

【讨论】：

最大宽度为我完成了这项工作。非常感谢！