Конструктор модальных окон

• Контент
• Дизайн
• Поведение
• Триггеры
• Кнопки

Основной контент

Заголовок модального окна

Текст модального окна Добро пожаловать! Это пример текста в модальном окне.

HTML контент

Размер и положение

Ширина Маленькая (300px) Средняя (500px) Большая (700px) Очень большая (800px) На весь экран (90%) Пользовательская

Выравнивание По центру Вверху Вверху справа Вверху слева Внизу Внизу справа Внизу слева

Цвета и стили

Цвет заголовка

Цвет текста заголовка

Цвет фона

Цвет текста

Цвет кнопки закрытия

Закругление углов Нет Маленькое Среднее Большое Очень большое

Тень и граница

Тень Нет Маленькая Средняя Большая Очень большая

Граница Нет Тонкая серая Тонкая черная Средняя серая Средняя черная

Анимация

Анимация открытия Появление (fade) Скольжение вниз Скольжение вверх Скольжение слева Скольжение справа Увеличение Отскок

Анимация закрытия Исчезание (fade) Скольжение вверх Скольжение вниз Скольжение слева Скольжение справа Уменьшение

Скорость анимации Очень быстро (200ms) Быстро (300ms) Средне (500ms) Медленно (700ms) Очень медленно (1000ms)

Поведение

Закрывать по ESC

Закрывать при клике вне окна

Показывать кнопку закрытия

Задержка перед показом

Триггеры открытия

Тип триггера Клик по элементу Задержка после загрузки Прокрутка страницы Попытка ухода со страницы

ID или класс элемента для клика

Задержка (мс)

Процент прокрутки

Чувствительность (расстояние до верхней границы)

Дополнительные кнопки

Добавить кнопку

Стиль кнопок

Цвет фона

Цвет текста

Цвет фона при наведении

Цвет текста при наведении

Закругление углов Нет Маленькое Среднее Большое Очень большое

Размер Маленький Средний Большой

Предпросмотр

Посмотреть в полном размере

Код для вставки

• HTML
• CSS
• JavaScript

Копировать весь код

Закрыть

Текстовый логотип

+7 495 123-45-67hello@olympia.ru

© 2022 Олимпия