显示大内容（宽度）的 Fancybox3

Question

我对 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

Answer 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"属性来自定义class名称）

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

显示大内容（宽度）的 Fancybox3

Display Fancybox3 with large content (width)

javascript

jquery

width

fancybox-3