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

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

Всплывающее окно (или popup) на сайте — это элемент интерфейса, который появляется поверх основного содержимого страницы. Оно может быть использовано для различных целей, таких как уведомления, рекламные объявления, формы для подписки, подтверждения действий и другие интерактивные элементы.

Если вы хотите создать всплывающее окно на сайте, вот пример HTML, CSS и JavaScript кода для реализации базового всплывающего окна:

HTML

Показать всплывающее окно

CSS

/* Стили для всплывающего окна */ .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .popup-content { background-color: white; padding: 20px; border-radius: 8px; width: 300px; text-align: center; } .close { position: absolute; top: 10px; right: 10px; font-size: 20px; cursor: pointer; }

JavaScript

// Получаем элементы const showPopupButton = document.getElementById('showPopup'); const popup = document.getElementById('popup'); const closePopupButton = document.getElementById('closePopup'); // Показываем всплывающее окно showPopupButton.addEventListener('click', () => { popup.style.display = 'flex'; }); // Закрываем всплывающее окно closePopupButton.addEventListener('click', () => { popup.style.display = 'none'; }); // Закрытие окна при клике вне его window.addEventListener('click', (event) => { if (event.target === popup) { popup.style.display = 'none'; } });

Объяснение:

1. HTML: Структура страницы содержит кнопку для отображения всплывающего окна и само окно, которое скрыто по умолчанию.
2. CSS: Оформление для всплывающего окна и затемненной области за ним.
3. JavaScript: Скрипт для управления открытием и закрытием окна, а также закрытие окна при клике вне его области.

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

Если нужно, можем помочь добавить дополнительные функциональные возможности или стилизовать окно. Для этого напишите нам или свяжитесь с нами через телеграм, ватсап или по телефону .