0

在带有流体容器的可滚动页面上，fancybox modals 存在问题。在下面的示例中，当您打开 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>

4

1 回答 1

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>

于 2017-06-22T16:59:35.847 回答