Как при всплытии окна сделать затемнение заднего фона?

Question

[Koreetz Koreetz]

День добрый!
1. Сверстана всплывающая форма (HTML)
2. По умолчанию она скрыта display: none;(CSS)
3. При клике она показывается (JS)

var linkCall = document.querySelector('.btn-call');
var popupCall = document.querySelector('.callme');
var phoneField = popupCall.querySelector("[name=callme]")

linkCall.addEventListener("click", function(event) {
  event.preventDefault(event);
  popupCall.classList.add('callme__show');
  phoneField.focus();
});

window.addEventListener("keydown", function (event) {
  if (event.keyCode === 27) {
      if (popupCall.classList.contains("callme__show")) {
          popupCall.classList.remove("callme__show");
      }
    }
});

При клике ей присваивается класс callme__show{display:block;}

Что мне надо сделать, чтобы задний фон при открытии формы был затемнен либо полупрозрачен??
Подскажите буду премного благодарен.

Answer 1

[Амир Алимжанов]

<div class="modal-wrapper">
      <div class="modal-window">
        .........
      </div>
     <div class="overlay"></div>
</div>

<style>
.modal-wrapper {
    position:fixed;
    display:flex;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.7);
    z-index:100;
}

.overlay {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
}

.modal-window {
   width:300px;
   height:500px;
   z-index:2;
}
</style>

ну и дальше JS)
Чтоб при клике на .overlay закрывалось окно