Почему при нажатии кнопки не отображается мое черное наложение?

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>

Answer 2

Вы хотели что-то подобное? Я добавил элемент id в div и изменил вызов addclass в вашем Jquery на document.getElementById('dimmer').style.display= 'none / block' в ваших 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/