Question

我已经使用reactstrap软件包构建了一个自定义警报框，并从中导入了警报。但是我面临一个问题，当显示警告框时，我无法冻结页面或阻止用户访问页面的其他部分。因此，由于我是ReactJS的新手，因此我需要有关此问题的一些帮助。

问题示例：我们可以举一个显示警告框的示例，当我们放置“ windown.alert（）”时，其中会显示一个浏览器的警告框，直到确认该警告框，我们才能访问网页的任何部分。

Answer 1

典型的方法是：

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

这不会阻止人们使用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>

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

1 个答案: