Категории

• Все категории
• 2040
• CG
• IOT умный дом
• Joomla
• Linux
• Windows
• Безопасность
• железо
• Сети LAN
• Создание сайтов

Готовый скрипт для создания модального окна

27.10.2025 14:54 | коды из категории: Создание сайтов

Модальное окно на чистом HTML/CSS/JS — без jQuery и прочих динозавров

Иногда нужно просто показать что-то поверх страницы: форму обратной связи, уведомление, генератор паролей или даже предупреждение о том, что вы случайно запустили ядерный реактор. Вместо того чтобы тащить в проект тяжеленные UI-библиотеки, можно собрать всё самому — за 5 минут и без головной боли.

Ниже — минимальный, но полностью рабочий пример модального окна. Никаких зависимостей, только ванильный HTML, CSS и JavaScript. Такой код легко адаптировать под свои задачи: вставить форму, добавить анимацию или превратить окно в полноценный мини-интерфейс.

Что внутри?

• Открытие по кнопке
• Закрытие по крестику
• Закрытие кликом вне окна (чтобы не злить пользователей)
• Адаптивная верстка — работает и на десктопе, и на телефоне
• Всё в одном файле — удобно для копипаста и экспериментов

Такой подход отлично подходит для технических блогов, лендингов, IoT-панелей или даже автономных веб-интерфейсов на Raspberry Pi, где каждый килобайт на счету, а сторонние скрипты — лишний риск.

Код ниже можно взять «как есть» и вставить в свой проект. А если захочешь — легко расширить: добавить поддержку клавиши Escape, несколько модальных окон или интеграцию с формой (например, для генерации паролей — об этом будет отдельная статья).

Пример модального окна

Нажми кнопку ниже, чтобы открыть модальное окно.

Открыть модальное окно

html

  <button id="openModalBtn">Открыть модальное окно</button>

  <!-- Модальное окно -->
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>Привет!</h2>
      <p>Это полностью рабочее модальное окно на чистом HTML, CSS и JavaScript.</p>
    </div>
  </div>

java script

  <script>
    const modal = document.getElementById("myModal");
    const btn = document.getElementById("openModalBtn");
    const span = document.querySelector(".close");

    btn.onclick = () => modal.style.display = "block";
    span.onclick = () => modal.style.display = "none";
    window.onclick = (event) => {
      if (event.target === modal) modal.style.display = "none";
    };
  </script>

и если надо много кнопок на сайте то надо изменить скрипт и добавить ключ не в id а в style

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById("myModal");
    const openButtons = document.querySelectorAll(".open-modal-btn"); // все кнопки с классом
    const closeBtn = document.querySelector(".close");

    // Открытие модалки
    openButtons.forEach(button => {
      button.addEventListener("click", (e) => {
        e.preventDefault(); // на случай, если кнопка внутри <a> или формы
        modal.style.display = "block";
      });
    });

    // Закрытие по крестику
    if (closeBtn) {
      closeBtn.addEventListener("click", () => {
        modal.style.display = "none";
      });
    }

    // Закрытие по клику вне модалки
    window.addEventListener("click", (e) => {
      if (e.target === modal) {
        modal.style.display = "none";
      }
    });
  });
</script>

сами кнопки

<!-- Первая кнопка -->
<button class="open-modal-btn bg-purple-700 hover:bg-purple-800 text-white font-bold py-4 px-8 rounded-lg text-xl shadow-lg transform transition hover:scale-105">
    <i class="fas fa-clipboard-list mr-3"></i>
    ПРОЙТИ ДИАГНОСТИКУ
</button>

<!-- Вторая кнопка (внизу) -->
<button class="open-modal-btn bg-white text-primary hover:bg-gray-100 font-bold py-4 px-8 rounded-lg text-xl shadow-lg transform transition hover:scale-105 mb-4">
    <i class="fas fa-gift mr-3"></i>
    ЗАПИСАТЬСЯ НА ДИАГНОСТИКУ
</button>

<!-- Третья (тестовая) — можешь удалить -->
<!-- <button class="open-modal-btn">Открыть модальное окно</button> -->

← Назад к списку

---