javascript - 为什么单击按钮时我的黑色覆盖层没有出现？

Question

我正在尝试自己创建一个弹出窗口。我希望我的弹出框在按下按钮时出现，并且下面的所有内容都变暗。但是，当我按下按钮时，整个页面都挂起，也没有弹出窗口出现。

如果我删除将所有背景变为黑色的 div，我的弹出窗口工作正常。

这是我的 html 代码，里面有脚本标签

let visible = false;
$('#showBox').on('click', function(params) {
  if (visible) {
    $('.box').removeClass('boxVisible');
    $('.blackenBackground').removeClass('boxVisible');
    visible = false;
  } else {
    $('.box').addClass('boxVisible');
    $('.blackenBackground').addClass('boxVisible');
    visible = true;
  }
})

.box {
  background: pink;
  height: 500px;
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  border-radius: 1%;
  opacity: 0;
  transition: 0.4s;
  transition-timing-function: ease-out;
}

.boxVisible {
  opacity: 1;
}

.blackenBackground {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: black;
  opacity: 0;
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<p>Some lorem text.....
</p>

<button id="showBox">Show Box</button> 

<!-- When I remove this popup box works perfectly but background isn't darkening and my page hangs -->
<div class="blackenBackground"></div>

Answer 1

您的固定位置 div 正在阻止鼠标事件。不透明度为 0，但框在技术上仍然可见，这会捕获点击并防止按钮被点击。

只要确保盒子完全隐藏并且它应该可以工作即可。

let visible = false;
$('#showBox').on('click', function (params) {
    if(visible){
        $('.box').removeClass('boxVisible');
        $('.blackenBackground').removeClass('boxVisible');
        visible = false;
    }else{
        $('.box').addClass('boxVisible');
        $('.blackenBackground').addClass('boxVisible');
        visible = true;
    }
})

.box{
    background: pink;
    height: 500px;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    border-radius: 1%;
    opacity: 0;
    transition: 0.4s;
    transition-timing-function: ease-out;
}

.boxVisible{
    opacity: 1;
    display: block;
}

.blackenBackground{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: black;
    opacity: 0;
    display: none;
    z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<p>Some lorem text.....</p>
<button id="showBox">Show Box</button>
<div class="blackenBackground"></div>