Fancybox 3 和响应式背景

Question

带有流体容器的可滚动页面上的花式框模式存在问题。在下面的示例中，当您打开背景右侧的模式 fancybox 时，它会稍微拉伸一点，因为新模式没有垂直滚动条。模态关闭后背景尺寸再次修正。

.container {
  margin: 40px;
  padding: 20px;
  height: 200vh;
  background-color: bisque;
  transition: 3s all linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>

<div class="container">
 <div>
   Some content
 </div>
 <a data-fancybox data-src="#hidden-content" href="javascript:;">
   Open fancybox
 </a>
</div>
<div style="display: none;" id="hidden-content">
 <h2>Hello</h2>
 <p>You are awesome.</p>
</div>

Answer 1

简单地说，添加body { margin: 0; }

body { margin: 0; }

.container {
  margin: 40px;
  padding: 20px;
  height: 200vh;
  background-color: bisque;
  xtransition: 3s all linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>

<div class="container">
 <div>
   Some content
 </div>
 <a data-fancybox data-src="#hidden-content" href="javascript:;">
   Open fancybox
 </a>
</div>
<div style="display: none;" id="hidden-content">
 <h2>Hello</h2>
 <p>You are awesome.</p>
</div>

Fancybox 3 和响应式背景

Fancybox 3 and responsive background

fancybox

fancybox-3