Всплывающие окна в JS

Рейтинг: -3Ответов: 1Опубликовано: 25.01.2023

как сделать всплывающее окно как в MyStat, компьютерная академия шаг, пример прикреплю снизу

введите сюда описание изображения

Ответы

▲ 0

как сделать всплывающее окно как в MyStat

Предложу такой демонстрационный пример...

document.querySelector('button').addEventListener('click', _ => {
  const os = document.querySelector('#shadow')
  os.style.display = 'block'
  const om = document.querySelector('#message')
  om.style.display = 'block'
  os.addEventListener('click', _ => {
    os.style.display = 'none'
    om.style.display = 'none'
  }, {once: true})
})
#shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
  display: none;
}
#message {
  position: fixed;
  top: 40px;
  left: 10%;
  right: 10%;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  display: none;
}
<button>Test</button>

<div id='shadow'></div>
<div id='message'>
  <p>как сделать всплывающее окно как в MyStat, компьютерная академия шаг, пример прикреплю снизу</p>
</div>