как сделать плавающие окна

Веб-страницы с плавающими окнами становятся все более популярными, так как они позволяют улучшить дизайн и функциональность сайта. В этой статье мы рассмотрим, как создать плавающие окна на сайте с помощью CSS и JavaScript.

Плавающие окна ‒ это всплывающие окна, которые можно перемещать по экрану и которые остаются видимыми, даже когда пользователь прокручивает веб-страницу. Они обычно используются для отображения важной информации, предоставления дополнительных функций или для привлечения внимания пользователя.

Это пример плавающего окна.

Теперь добавим стили с помощью CSS.

.floating-window {
position⁚ fixed;
top⁚ 50%;
left⁚ 50%;
transform⁚ translate(-50%, -50%);
width⁚ 300px;
background-color⁚ #fff;
box-shadow⁚ 0px 2px 5px rgba(0٫ 0٫ 0٫ 0.1);
border-radius⁚ 5px;
z-index⁚ 999;
}

.header {
padding⁚ 10px;
background-color⁚ #f2f2f2;
border-bottom⁚ 1px solid #ddd;
}

.close-button {
float⁚ right;
border⁚ none;
background-color⁚ transparent;
cursor⁚ pointer;
font-size⁚ 16px;
}

.content {
padding⁚ 10px;
}

Теперь у нас есть стилизованное плавающее окно. Однако оно по-прежнему остается невидимым на странице. Для этого нам понадобится JavaScript.

const floatingWindow document.querySelector(‘.floating-window’);
const closeButton document.querySelector(‘.close-button’);

closeButton.addEventListener(‘click’, > {
floatingWindow.style.display ‘none’;
});

document.addEventListener(‘scroll’, > {
floatingWindow.style.top `${window.scrollY window.innerHeight / 2}px`;
});

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

Теперь наше плавающее окно готово к использованию на веб-странице. Вы можете добавить любую информацию или функциональность, которую хотите отображать в окне.

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

Плавающее окно