html - 如何创建一个固定全屏不可滚动的div？

Question

我正在尝试模仿典型的模式。当用户单击某些内容时，会显示模式，并带有全屏且固定的透明背景。

目前我有这个:

.thank-outer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: rgba(222, 222, 222, 0.7);
}

<div class="thank-outer" id="thankyou"> Some text </div>

div的高度不是浏览器的高度，而是整个页面内容的高度，因此它是可滚动的。

如何更改它以使div的高度恰好是浏览器的高度？

Answer 1

您可以通过将 body 元素的 overflow 属性设置为 hidden 轻松实现此目的。这会切断所有溢出屏幕的元素(并会形成滚动条)。

const $modal = document.querySelector('.modal');
const $button = document.querySelector('button');    

// Opening modal
$button.addEventListener('click', () => {
  document.body.classList.toggle('modal-visible');
  $modal.classList.toggle('visible');
});

body.modal-visibile {
  /* remove scroll bars when modal visible */
  overflow: hidden;
}

.modal {
  /* it is initially hidden */
  display: none;
  
  /* it will span whole screen */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;


  /* make it on top of all elements */
  z-index: 1000;
  overflow: hidden;
  pointer-events: all;
  
  /* make the background white, but also with 80% opacity */
  background: rgba(222, 222, 222, 0.8);
}

.modal.visible {
  display: block;
}
    
button {
  position: relative;
  z-index: 1001;
}

<button>Toggle Modal</button>

<h1>Some amazing content</h1>
<h2>Hopefully you enjoy this awesome content.</h2>
<p>Why are you still reading this? Just click the button!</p>

<div class="modal">
  <h1>It's a whole new world!</h1>
</div>