Всплывающее окно на JS
Created on: September 28, 2024
Answered using OpenAI 01 Preview by OpenAI01
Question
код всплывающего окна на чистом js. у окна должна быть кнопка закрыть, окно должно закрываться по клику вне области окна. область вне окна должна быть затемнена
Thought
Создание попапа
Я работаю над кодом для всплывающего окна на чистом JavaScript, которое имеет кнопку закрытия, закрывается при клике вне его области и затемняет внешнюю область.
Создание модального окна в JS
Использование кода в пояснениях
Применение code blocks помогает структурировать информацию и облегчить понимание, предоставляя чёткие примеры для объяснения.
В основном, я занялся разъяснением структуры HTML и CSS для модального окна, включая стили и поведение при открытии/закрытии.
Создание окна
Я думаю о том, как нужно разработать JS-код для окна с кнопкой закрытия, закрывающегося при клике вне окна, и затем объяснить код.
Answer
Вот пример кода всплывающего окна на чистом 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">×</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"
и символ×
для отображения крестика.
- Добавляем кнопку с
-
CSS:
.modal
: задает фиксированное позиционирование и затемненный фон..modal-content
: стилизует содержимое окна и центрирует его..close-btn
: стилизует кнопку закрытия.
-
JavaScript:
- Получаем необходимые элементы по их
id
. - Добавляем обработчик события
onclick
для кнопки открытия, который устанавливаетmodal.style.display = 'block'
. - Добавляем обработчик события
onclick
для кнопки закрытия, который скрывает модальное окно. - Обработчик события
onclick
дляwindow
закрывает модальное окно, если клик происходит вне области содержимого модального окна.
- Получаем необходимые элементы по их
Как это работает:
- При нажатии на кнопку "Открыть окно" модальное окно становится видимым.
- Затемненный фон реализован с помощью
background-color: rgba(0, 0, 0, 0.5);
. - Клик по кнопке закрытия или вне области окна приводит к скрытию модального окна.
Примечание: Вы можете настроить стили по своему усмотрению, изменить размеры, цвета и содержимое модального окна.