Вывод блока при клике JS

Question

Подскажите, пожалуйста, как решить эту задачу? Не знаю как вывести блок с кнопкой при клике. Alert выводит просто текстовое сообщение.

Answer 1

Я уверен что меня заминусуют) но вот то что нужно.

const btnOpen = document.querySelector('.open');
const btnClose = document.querySelector('.close');

btnOpen.onclick = () => document.querySelector('.modal').classList.add('visible');
btnClose.onclick = () => document.querySelector('.modal').classList.remove('visible');

.modal {
  display: none;
  position: relative;
}

.window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #ccc;
  width: 500px;
  padding: 20px 0;
  background: rgb(209, 243, 238);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  opacity: .5;
  width: 100%;
  height: 100%;
  background: #727272
}

.close {
  width: 70%;
}

.visible {
  display: block;

}

<button class="btn open">Open modal</button>
<div class="modal">
  <div class="overlay"></div>
  <div class="window">
    <h1 class="title">Hello from Modal Window!</h1>
    <button class=" btn close">Close</button>
  </div>
</div>

БЛОГ НА HUSL

Вывод блока при клике JS

Ответы (1 шт):