Стили для модального окна на сайте monkeyplace.ru

На веб-сайте monkeyplace.ru используется модальное окно для отображения дополнительной информации о товарах и услугах. Для этой цели используется библиотека Remodal. В этой статье мы рассмотрим стили для этой библиотеки, которые находятся в файле remodal.css.

Селекторы

Основным селектором для модального окна является .remodal, который определяет общие свойства окна. Дочерние селекторы определяют различные элементы модального окна, такие как заголовок, кнопки для закрытия, анимации и т.д.

Основные свойства

.remodal {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s,opacity 0.3s ease;
}

Свойство overflow: auto определяет, что окно может прокручиваться в случае, если его содержимое не помещается на экране. Свойство -webkit-overflow-scrolling: touch определяет, что прокрутка будет иметь плавный эффект на устройствах с сенсорным экраном.

Свойство position: fixed зафиксирует окно на месте, а свойство z-index: 10 определяет, что окно будет находиться над остальными элементами страницы.

Свойства top, right, bottom и left устанавливают положение окна на экране, а свойство visibility: hidden делает его невидимым. Свойство opacity: 0 устанавливает прозрачность окна на 0, что также делает его невидимым.

Свойство transition: visibility 0s linear 0.3s,opacity 0.3s ease определяет, что изменения видимости и прозрачности окна будут происходить с задержкой в 0,3 секунды, чтобы создать эффект плавной анимации.

Заключение

Стили для модального окна на сайте monkeyplace.ru предоставляют удобный способ показать дополнительную информацию о товарах и услугах, не перегружая основную страницу. Использование библиотеки Remodal и соответствующих стилей позволяет создавать красивые и функциональные модальные окна, которые могут быть адаптированы для разных устройств и разных целей.