ファンシーボックス3と応答のある背景

Question

液体容器のあるスクロール可能なページにファンシーボックスのモーダルに問題があります。 新しいモーダルに垂直スクロールバーがないため、背景の右側にあるmodal 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>

を追加