如何防止用户在自定义警告框关闭之前访问页面的其他部分？

Question

我使用 reactstrap 包构建了一个定制的警报框，并从中导入了警报。但是我面临一个问题，即在显示警告框时我无法冻结页面或阻止用户访问页面的其他部分。所以我需要一些关于这个问题的帮助，因为我是 reactjs 的新手并且没有找到任何关于这个问题的帮助。

问题示例：我们可以举个例子，当我们输入 "windown.alert()" 时显示的警告框，其中显示了浏览器的警告框，并且在我们确认警告框之前我们无法访问网页的任何部分。

Answer 1

典型的方法是：

在 body 元素上设置 overflow: hidden
在页面上的视口的高度和宽度放置一个绝对定位的元素以吸收点击
将您的内容放在上面

这不会阻止人们使用 DOM 工具访问内容，但会防止意外点击那里。

addEventListener('load', init);

function init() {
  document
    .querySelector('button')
    .addEventListener('click', close);

  function close(e) {
    document.querySelector(".modal-active").classList.toggle("modal-active");
  }
}

* { margin: 0; padding: 0; }

.modal-active {
  overflow: hidden;
}

.modal-background,
.modal-content {
  display: none;
}

.modal-active .modal-background {
  display: block;
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(100, 100, 100, 0.8);
  pointer-events: none;
}

.modal-active .modal-content {
  display: block;
  position: absolute;
  z-index: 2;
  top: 20%;
  left: 20%;
  right: 20%;
  bottom: 20%;
  background: rgb(100, 200, 100);
  text-align: center;
}

button {
  margin: 2em;
  padding: 1em;
}

<div class="modal-active">

  <div class="modal-background"></div>
  <div class="modal-content">
    <button>Hello</button>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum leo lacus, quis vestibulum nunc ultrices at. Quisque id tempus justo, id faucibus massa. Suspendisse laoreet gravida urna id interdum. Etiam in risus nisl. Proin ipsum massa, sagittis
    vel laoreet a, porttitor eu tellus. Nam vestibulum, mi nec vestibulum placerat, velit purus hendrerit augue, at sollicitudin tellus diam id ante. Donec ultricies erat sit amet nibh rhoncus malesuada.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum leo lacus, quis vestibulum nunc ultrices at. Quisque id tempus justo, id faucibus massa. Suspendisse laoreet gravida urna id interdum. Etiam in risus nisl. Proin ipsum massa, sagittis
    vel laoreet a, porttitor eu tellus. Nam vestibulum, mi nec vestibulum placerat, velit purus hendrerit augue, at sollicitudin tellus diam id ante. Donec ultricies erat sit amet nibh rhoncus malesuada.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum leo lacus, quis vestibulum nunc ultrices at. Quisque id tempus justo, id faucibus massa. Suspendisse laoreet gravida urna id interdum. Etiam in risus nisl. Proin ipsum massa, sagittis
    vel laoreet a, porttitor eu tellus. Nam vestibulum, mi nec vestibulum placerat, velit purus hendrerit augue, at sollicitudin tellus diam id ante. Donec ultricies erat sit amet nibh rhoncus malesuada.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum leo lacus, quis vestibulum nunc ultrices at. Quisque id tempus justo, id faucibus massa. Suspendisse laoreet gravida urna id interdum. Etiam in risus nisl. Proin ipsum massa, sagittis
    vel laoreet a, porttitor eu tellus. Nam vestibulum, mi nec vestibulum placerat, velit purus hendrerit augue, at sollicitudin tellus diam id ante. Donec ultricies erat sit amet nibh rhoncus malesuada.</p>

</div>

如何防止用户在自定义警告框关闭之前访问页面的其他部分？

How to prevent the user from accessing other parts of the page until the customized alert box is closed?

html

css

reactjs

reactstrap