Question

我遇到了fancybox3的问题。如果您有更大的内容宽度，例如2500px，盒子的显示不正常。要查看此fancybox，您必须向下滚动。

这是我的代码：

<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"属性设置自定义类名称）

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

显示内容大（宽）的Fancybox3

1 个答案: