Как создать модальное окно: для новичков, ленивых и тех, кто любит кастомные решения

Как создать модальное окно: для новичков, ленивых и тех, кто любит кастомные решения

Михаил 03.03.2025 Комментариев нет

Привет, будущие короли верстки! Сегодня у нас важная тема – модальные окна. Эти всплывающие красавцы встречаются везде: от регистрации на сайте до всплывающих кошмаров с «Подпишитесь на рассылку». Разберём, как сделать их двумя способами:

1️⃣ Легчайший – на Bootstrap (для тех, кто любит, когда всё за него делают)
2️⃣ Кастомный – своими руками (для тех, кто любит контроль и гибкость)

Готовы? Тогда врываемся! 🚀

Способ 1: Модальное окно на Bootstrap – быстро, просто и лениво

Если вы хотите просто нажать кнопку и получить красивое модальное окно, то Bootstrap – ваш друг. Библиотека уже умеет работать с модалками, а нам остаётся только правильно её подключить.

1. Подключаем Bootstrap

Чтобы использовать встроенные модалки, вам нужно подключить Bootstrap. Если он у вас уже есть – отлично, пропускаем этот шаг. Если нет – добавляем в <head> страницы:

<!-- Подключаем стили Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Подключаем JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>

2. Добавляем HTML модального окна

Теперь создаём кнопку, которая будет вызывать модалку, и само модальное окно:

<!-- Кнопка для открытия модального окна -->
<button id="modalBtn" class="btn btn-primary">Открыть модалку</button>

<!-- Само модальное окно -->
<div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Привет, я модалка!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <p>Здесь может быть ваш контент. Например, форма обратной связи.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

3. Добавляем магию JavaScript

Теперь подключаем код, который заставит кнопку открывать модалку:

'use strict';

const modalBtn = document.getElementById('modalBtn');
const modal = document.getElementById('modal');

// Создаём экземпляр модального окна Bootstrap
const myModal = new bootstrap.Modal(modal);

// Вешаем обработчик клика
modalBtn.addEventListener('click', () => {
  myModal.show(); // Показываем модалку
});

💡 Что происходит?
– Нажимаем кнопку – вызываем метод show(), и модальное окно открывается.
– Bootstrap сам закроет окно, если кликнуть на кнопку закрытия или за пределами модалки.

✨ Всё, минимальные усилия – и модальное окно работает!

Способ 2: Делаем своё кастомное модальное окно

А теперь для тех, кто не ищет лёгких путей. Мы сделаем своё модальное окно – с красивыми анимациями и полной кастомизацией.

1. Пишем HTML

<!-- Кнопка открытия кастомного модального окна -->
<button id="customModallBtn" class="btn btn-primary">Открыть кастомную модалку</button>

<!-- Кастомное модальное окно -->
<div id="customModal" class="modal-window">
  <div class="modal-body">
    <div class="modal-title">
      <h1>Я кастомная модалка!</h1>
    </div>
    <div class="modal-content">
      <p>А вот и я, без Bootstrap, но с любовью.</p>
    </div>
    <div class="modal-close" data-modal="close">&times;</div>
  </div>
</div>

2. Оформляем стилями (CSS)

Добавим стили, чтобы модалка красиво появлялась и исчезала.

.btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-window {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    transition: opacity 0.3s ease-in-out;
}

.modal-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    max-width: 500px;
    padding: 30px 20px;
    background-color: #fff;
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.modal-title h1 {
    font-size: 26px;
    text-align: center;
    margin-bottom: 15px;
}

.modal-close {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.modal-content p {
    margin-bottom: 0;
}

.modal-window.active {
    display: block;
    opacity: 1;
}

.modal-window.active .modal-body {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

3. Добавляем JavaScript

Теперь оживим модалку с помощью JS:

'use strict';
// Получаем кнопку, которая будет открывать кастомное модальное окно
const customModalBtn = document.getElementById('customModallBtn');

// Получаем кнопку закрытия модального окна (элемент с атрибутом data-modal="close")
const closeBtn = document.querySelector('[data-modal="close"]');

// Получаем сам контейнер модального окна
const customModal = document.getElementById('customModal');

// Вешаем обработчик события на кнопку открытия модального окна
customModalBtn.addEventListener('click', () => {
  // Добавляем класс "active", чтобы модальное окно стало видимым
  customModal.classList.add('active');

  // Блокируем прокрутку страницы, чтобы при открытом модальном окне нельзя было скроллить фон
  document.body.style.overflow = 'hidden';
});

// Вешаем обработчик клика на кнопку закрытия модального окна
closeBtn.addEventListener('click', closeModal);

// Вешаем обработчик клика на само модальное окно (для закрытия при клике вне контента)
customModal.addEventListener('click', closeModal);

// Функция закрытия модального окна
function closeModal(event) {
  // Проверяем, был ли клик по самому модальному окну (фону) или по кнопке закрытия
  if (event.target === customModal || event.target === closeBtn) {
    // Удаляем класс "active", скрывая модальное окно
    customModal.classList.remove('active');

    // Разрешаем прокрутку страницы снова
    document.body.style.overflow = '';
  }
}

🔍 Разбор кода:

Мы находим нужные элементы (кнопки, модальное окно) и сохраняем их в переменные.
При клике на кнопку «Открыть модалку», добавляем класс active, который делает окно видимым, и запрещаем скроллить страницу.
При клике на крестик или само модальное окно (его фон) проверяем, куда именно был клик. Если по фону или кнопке закрытия — убираем active, тем самым скрываем окно, и снова разрешаем скроллить страницу.

Итоги

✔ Для ленивых – используем Bootstrap: просто, быстро, удобно.
✔ Для тех, кто хочет контролировать всё – кастомная модалка, которую можно настроить под себя.

Теперь у вас есть выбор, как сделать модальное окно. А какой способ выберете вы? 😉