UI-компоненты. Модальное окно на JavaScript

Создадим простое модальное окно на JavaScript. Этот код создает модальное окно, которое появляется при нажатии кнопки «Открыть модальное окно». Модальное окно содержит некоторый текст и имеет кнопку закрытия (представленную символом «x») в правом верхнем углу.

HTML:

<div class="container">
  <h2>Modal Example</h2>
  <br />
  <button id="myBtn">Open Modal</button>
</div>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Modal content goes here.</p>
  </div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Фон для модального окна */
.modal {
  display: none; /* По умолчанию скрываем */
  position: fixed; /* Делаем фиксированным */
  z-index: 1; /* Поверх основого окна */
  left: 0;
  top: 0;
  width: 100%; /* На всю ширину */
  height: 100%; /* На всю высоту */
  overflow: auto; /* Включаем скролл при переполнении */
  background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный темный фон */
  justify-content: center;
  align-items: center;
  user-select: none;
}

/* Модальное окно */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  border: 1px solid #888;
  width: 80%;
  padding: 20px;
  position: relative;
}

/* Кнопка для закрытия */
.close {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 7px;
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

JavaScript:

// Считываем модальное окно
var modal = document.getElementById("myModal");

// Считываем кнопку для открытия окна
var btn = document.getElementById("myBtn");

// Считываем кнопку для закрытия онка
var span = document.getElementsByClassName("close")[0];

// Открываем модальное окно при нажатии на кнопку
btn.onclick = function () {
  modal.style.display = "flex";
};

// Закрываем модальное окно при нажатии на крестик
span.onclick = function () {
  modal.style.display = "none";
};

// Когда пользователь кликает в любом месте
// за пределами модального окна - закрываем его
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};