Question

在带有流体容器的可滚动页面上，fancybox模式存在问题。在下面的示例中，当你打开模态fancybox右侧的背景时，因为新模态没有垂直滚动条。关闭模态后，背景大小再次得到纠正。

＆＃13;

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

＆＃13;

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

＆＃13;

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和响应背景

1 个答案: