javascript - 显示大内容(宽度)的 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 使用内联 block 技巧进行垂直和水平居中。这是以未知为中心的最佳选择，但不幸的是存在一些缺点。通过强制使用超宽的内容，您就破坏了它。

您有多种选择，例如:

使内容可滚动:

#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