logoOpenAI01.net

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

Создано: 28 сентября 2024 г.

Отвечено с использованием OpenAI 01 Preview от OpenAI01

Вопрос

код всплывающего окна на чистом js. у окна должна быть кнопка закрыть, окно должно закрываться по клику вне области окна. область вне окна должна быть затемнена

Мысль

Создание попапа

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

Создание модального окна в JS

Использование кода в пояснениях
Применение code blocks помогает структурировать информацию и облегчить понимание, предоставляя чёткие примеры для объяснения.

В основном, я занялся разъяснением структуры HTML и CSS для модального окна, включая стили и поведение при открытии/закрытии.

Создание окна

Я думаю о том, как нужно разработать JS-код для окна с кнопкой закрытия, закрывающегося при клике вне окна, и затем объяснить код.

Ответ

Вот пример кода всплывающего окна на чистом JavaScript, которое содержит кнопку закрытия, закрывается при клике вне области окна, а область вне окна затемнена.

HTML и CSS:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Всплывающее окно на чистом JS</title>
    <style>
        /* Стили для модального окна и затемненного фона */
        .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.5); /* Затемнение фона */
        }

        /* Стили для содержимого модального окна */
        .modal-content {
            background-color: #fff;
            margin: 15% auto; /* Отступ сверху и по центру */
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            position: relative;
        }

        /* Стили для кнопки закрытия */
        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-btn:hover,
        .close-btn:focus {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>

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

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

    <!-- JavaScript код -->
    <script>
        // Получаем элементы
        var modal = document.getElementById('myModal');
        var openBtn = document.getElementById('openModalBtn');
        var closeBtn = document.getElementById('closeModalBtn');

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

        // Закрываем модальное окно при клике на кнопку закрытия
        closeBtn.onclick = function() {
            modal.style.display = 'none';
        }

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

Объяснение:

  • HTML:

    • Добавляем кнопку с id="openModalBtn" для открытия модального окна.
    • Создаем модальное окно с id="myModal" и классом modal, внутри которого содержится блок modal-content.
    • Кнопка закрытия имеет id="closeModalBtn" и символ &times; для отображения крестика.

  • CSS:

    • .modal: задает фиксированное позиционирование и затемненный фон.
    • .modal-content: стилизует содержимое окна и центрирует его.
    • .close-btn: стилизует кнопку закрытия.

  • JavaScript:

    • Получаем необходимые элементы по их id.
    • Добавляем обработчик события onclick для кнопки открытия, который устанавливает modal.style.display = 'block'.
    • Добавляем обработчик события onclick для кнопки закрытия, который скрывает модальное окно.
    • Обработчик события onclick для window закрывает модальное окно, если клик происходит вне области содержимого модального окна.

Как это работает:

  • При нажатии на кнопку "Открыть окно" модальное окно становится видимым.
  • Затемненный фон реализован с помощью background-color: rgba(0, 0, 0, 0.5);.
  • Клик по кнопке закрытия или вне области окна приводит к скрытию модального окна.

Примечание: Вы можете настроить стили по своему усмотрению, изменить размеры, цвета и содержимое модального окна.

Поделиться этим Q&A