Fancybox 3和響應式背景

Question

在帶有流體容器的可滾動頁面上，fancybox模式存在問題。 在下面的例子中，當你打開模式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"> 
 
\t <h2>Hello</h2> 
 
\t <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"> 
 
\t <h2>Hello</h2> 
 
\t <p>You are awesome.</p> 
 
</div>