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

2024-04-29 • 问答

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

如果我删除将所有背景变为黑色的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>

您的固定位置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>

您想要这样的东西吗？我在id中添加了div元素，并在document.getElementById('dimmer').style.display= 'none / block'语句中将Jquery中的addclass调用更改为if-else，并将.css类更改为>

.blackenBackground{
    pointer-events: none;
    background:#000;
    opacity:0.5;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
}

jsFiddle：https://jsfiddle.net/j0d8emsc/

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

dhy9062 回答：为什么单击按钮时我的黑色覆盖物没有出现？

大家都在问