Модальное окно JS: простое решение для интерактивных всплывающих окон

Модальные окна - это популярный элемент веб-интерфейса, который позволяет вам взаимодействовать с пользователем, не перезагружая страницу. Они применяются для отображения дополнительной информации, вывода сообщений или запроса пользовательских действий. В создании модальных окон на JavaScript есть несколько подходов. Рассмотрим несколько примеров кода, иллюстрирующих различные способы реализации модальных окон. Пример 1: Использование HTML и CSS для создания модального окна HTML:


<!-- Кнопка, открывающая модальное окно -->
<button id="openModal">Открыть модальное окно</button>

<!-- Модальное окно -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <p>Содержимое модального окна.</p>
  </div>
</div>

CSS:


/* Стили для модального окна */
.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);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

JavaScript:


// Получение ссылок на элементы
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModal");
var span = document.getElementsByClassName("close")[0];

// Функция открытия модального окна
btn.onclick = function() {
  modal.style.display = "block";
}

// Функция закрытия модального окна
span.onclick = function() {
  modal.style.display = "none";
}

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

В данном примере мы создаем кнопку "Открыть модальное окно" и модальное окно самостоятельно при помощи HTML и CSS. JavaScript используется для управления состоянием модального окна. При клике на кнопку, вызывается функция, которая изменяет свойство `display` на "block", делая модальное окно видимым. Затем указанные функции обрабатывают закрытие модального окна при клике на кнопку "закрыть" или при клике вне модального окна. Пример 2: Использование библиотеки "Bootstrap" для создания модального окна HTML:


<!-- Кнопка с использованием Bootstrap -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Открыть модальное окно</button>

<!-- Модальное окно с использованием Bootstrap -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Заголовок модального окна</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Содержимое модального окна.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

JavaScript:


// В данном примере JavaScript-код не требуется, так как функциональность модального окна управляется библиотекой Bootstrap.

В этом примере для создания модального окна используется библиотека Bootstrap - популярный фреймворк для разработки веб-интерфейсов. Благодаря использованию атрибута `data-toggle` и `data-target` в кнопке, модальное окно отображается при клике на кнопку. Отрисовка и функциональность модального окна полностью управляются библиотекой Bootstrap, и JavaScript-код не требуется.

Модальное окно JS: простое решение для интерактивных всплывающих окон

Похожие вопросы на: "модальное окно js "