Анимированное SVG модальное окно
✭ Анимированное SVG модальное окно ✭
Создание, разработка, изготовление сайтов | WEB-STYDIA.COM

5/51 rating

Сегодня гуляя по просторам интернета мне встретилась интересная реализация полноэкранного модального окна, которое было создано при помощи элементов SVG и JS, и я не смог удержатся чтоб не поделится красивым анимированным всплывающим окном с вами.

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

Мы уже давно экспериментируем с анимацией SVG и сегодня в данной статье на примере создания современного всплывающего окна мы расскажем вам как можно анимировать сразу несколько путей SVG, и сделать изумительно стильный фоновый эффект для модального окна.

Для чего нужен скрипт модального окна спросите Вы? - Ну как же! Вы наверняка не раз видели как на разных сайтах данные окна применяются, кто то использует современные всплывающие окна для того чтоб принять заявку на какой либо заказ на сайте, кому то модальное окно служит для того чтобы скрыть какой то громоздкий контент который будет открываться по клику кнопки, некоторые используют модуль всплывающего окна для того чтоб предоставить пользователю какую то важную информацию, общим цель использования модальных окон у каждого сайта своя, но они очень востребованы практически на любом сайте.

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

Как всегда скачать готовое модальное окно вы можете на нашем сайте под данной статьей, там же вы сможете посмотреть наш пример модального окно с анимированным фоном, который мы сейчас и изучим. Ну что же давайте мы отступим от теории и приступим к практике, создадим современное модальное окно для вашего сайта.

Первый шаг с которого мы начнем создание всплывающего окна это буде HTML разметка, которая имеет очень простую структуру, и состоит из двух основных элементов <section>, действие для обертки самой кнопки #modal-trigger, блок div.cd-modal то есть само модальное окно, блок контента .cd-modal-content модального окна, ну и последнее это div.cd-svg-bg, который и будет создавать эффект покрытия фона.

Здесь так же было использование дополнительно слой div.cd-cover-layer который предназначен для покрытия основного содержимого в момент открытия анимированного всплывающего окна.

Следующим нашим шагом будет добавление стилей для нашего окна, изначальное значение в .cd-modal visibility: hidden; position: fixed; height: 100%; и width: 100%;,а при вызове действия кнопки модального окна то есть при нажатии на a#modal-trigger изменяется видимость окна из скрытое на видимое положение .modal-is-visible.

В связи с тем что цвет блока .cd-modal-content одинаковый с блоком фона .cd-cover-layer, основным отображаемым контентом будет тот, который находится на зеленом фоне svg, в то время как .cd-cover-layer будет скрыт.
Со стилями закончили, теперь остался последний пункт это нам требуется подключить обработчик JS чтобі наше всплывающее окно работало.

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

Посмотреть живой пример

Также вы можете скачать готовое полноэкранное модальное окно ниже.

Вас также может заинтересовать

Есть один комментарий

  •   13.04.2020 в 18:14

    Обратите внимание иногда скрипт модального окна может конфликтовать с другими скриптами, как исправить смотрите:
    в дне страницы которая отвечает у вас за подключенные скрипты отправляете:

    а в файле main.js вносите изменения поставив перед всеми «$» букву «j» — тогда должно работать.

    Ответить

Оставить комментарий

Пожалуйста, введите Ваше имя. Пожалуйста, введите действительный адрес электронной почты. Пожалуйста, введите сообщение.