Fancybox 3 和响应式背景答案

【问题标题】：Fancybox 3 and responsive backgroundFancybox 3 和响应式背景
【发布时间】：2017-06-22 09:57:50
【问题描述】：

在带有流体容器的可滚动页面上，fancybox 模式存在问题。在下面的示例中，当您打开 modal fancybox 右侧的背景拉伸了一点，因为新的 modal 没有垂直滚动条。模态关闭后，背景大小再次更正。

.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>

【问题讨论】：

标签： fancybox fancybox-3

【解决方案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>

【讨论】：