-4

Подскажите, пожалуйста, как решить эту задачу? Не знаю как вывести блок с кнопкой при клике. Alert выводит просто текстовое сообщение. https://i.stack.imgur.com/espHx.png

1
  • Данное модальное окно, вызывает не алертом 10 апр 2022 в 11:12

1 ответ 1

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>

3
  • Да почему сразу заминусуют, скорее заплюсуют) решение вы предложили, а дальше пусть автор сам разбираеться
    – GGO
    10 апр 2022 в 11:45
  • Ну обычно такие вопросы минусуют, потому что автор не понимает в целом как решать эту задачу. И если даешь решение, делаешь еще хуже человеку. Он просто получил то что хотел. Не прилагая усилия и не разобравшись. Так сказать это реакция сообщества. 10 апр 2022 в 11:50
  • ну да, само-собой :0
    – GGO
    10 апр 2022 в 13:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.