Question

我正在尝试复制类似于Reddit的模态，我不确定他们是如何完成以下的

当模态打开时，滚动被禁用
当窗口小于模态时，启用滚动

我尝试打开和关闭Chrome开发工具中的一些CSS属性，但它们似乎都不会影响滚动。我已经尝试添加滚动禁用功能，但问题是它禁用了所有滚动，所以当窗口小于模态时，滚动仍然被禁用。

Answer 1

当模态打开时，<body>标记会被赋予modal-open类，这会禁用页面本身的滚动条。

模态本身定位为填充整个视口，并设置为overflow: auto，这意味着当模态的内容大于视口时，滚动条仅显示在模态元素上。

您可以在下面看到最小的概念证明：

＆＃13;

/* when modal is closed: */
#body {
  text-align: center; padding: 30px;
}
#body:not(.modal-open) {
  overflow: auto;
}
#body:not(.modal-open) #modal {
  display:none;
}

/* when modal is open: */
#body.modal-open {
  overflow: hidden;
}
#body.modal-open #modal {
  overflow: auto;
  padding: 10px;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}
#modal_inner {
  width: 100px;
  height: 200px;
  background: #fff;
  border: 1px solid #000;
  text-align: center;
  padding: 50px;
  margin: auto;
}

＆＃13;

<html>
<body id="body">
  <div style="width: 200%; height: 300%">
    <button onclick="document.getElementById('body').classList.toggle('modal-open')">open modal</button>
  </div>
  <div id="modal">
    <div id="modal_inner">
      This is the modal!
      <button onclick="document.getElementById('body').classList.toggle('modal-open')">close modal</button>
    </div>
  </div>
</body>
</html>

＆＃13;

Reddit如何登录/注册模式？

1 个答案: