如何在瀏覽器中顯示彈出窗口時凍結屏幕？

Question

我想實現一個簡單的教程來解釋我的網站的具體領域與popovers實現的作用。 我的想法是，當用戶點擊按鈕start tutorial時，一些彈出按順序顯示在不同的元素上，當彈出窗口打開時，屏幕的其餘部分被阻止，用戶只能按next關閉當前的彈出窗口並打開下面的教程，直到教程結束。 我該怎麼做？

Answer 1

當模式是開放的，你必須使用JS暫時補充溢出：隱藏在body元素（這將刪除滾動條在主窗口，防止滾動。）

的標記來管理此類對身體的切換已經回答了/在這裏提供：

How to disable scrolling temporarily?

Answer 2

如果你只是要求用戶不能夠點擊任何地方，除了在本教程中，你可以做一個簡單的疊加像所以（全屏查看片段）：

html, 
 
body { 
 
    overflow: hidden 
 
} 
 
.block { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background: black; 
 
    opacity: 0.8; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.tutorial { 
 
    height: 300px; 
 
    width: 800px; 
 
    background: #ccc; 
 
    position: absolute; 
 
    top: 50vh; 
 
    left: 50vw; 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 
iframe { 
 
    height: 100vh; 
 
    width: 100vw; 
 
}

<iframe src="http://autotrader.com" frameborder="0" scrolling="no"></iframe> 
 
<div class="block"> 
 

 
</div> 
 

 
<div class="tutorial"> 
 

 
</div>