🔥 Полноэкранное SVG модальное окно для сайта ✭

5/53 оценки

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

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

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

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

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

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

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

<main class="cd-main-content">
 <section class="center">
 <h1>SVG Модальное окно</h1>
 <a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">Кнопка модального окна</a>
 </section>
</main> <!-- .cd-main-content -->
 
<div class="cd-modal" data-modal="modal-trigger">
 <div class="cd-svg-bg" data-step1="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z" data-step2="M33.8,690l-188.2-300.3c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1L959.6,110c0.1,0.1,0,0.3-0.1,0.3 L34.1,690.1C34,690.2,33.9,690.1,33.8,690z" data-step3="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z" data-step4="M-329.3,504.3l-272.5-435c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1l272.5,435c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-329,504.5-329.2,504.5-329.3,504.3z" data-step5="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z" data-step6="M476.4,1013.4L205,580.3c-0.1-0.1,0-0.3,0.1-0.3L1130.5,0.2c0.1-0.1,0.3,0,0.3,0.1l271.4,433.1c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C476.6,1013.6,476.5,1013.5,476.4,1013.4z">
 <svg height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 800 500">
 <title>SVG Modal background</title>
 <path id="cd-changing-path-1" d="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z"/>
 <path id="cd-changing-path-2" d="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z"/>
 <path id="cd-changing-path-3" d="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z"/>
 </svg>
 </div>
 
 <div class="cd-modal-content">
 <!-- modal content here -->
 </div> <!-- cd-modal-content -->
 
 <a href="#0" class="modal-close">Close</a>
</div> <!-- cd-modal -->
 
<div class="cd-cover-layer"></div> <!-- .cd-cover-layer -->

<h1>SVG Модальное окно</h1>

<a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">Кнопка модального окна</a>

</section>

</main>

<title>SVG Modal background</title>

</svg>

</div>

</div>

<a href="#0" class="modal-close">Close</a>

</div>

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

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

.cd-modal {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  transition: visibility 0s 0.6s;
}
.cd-modal.modal-is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}

.cd-cover-layer {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #f2f2f2;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
}
.cd-cover-layer.modal-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-modal-content {
  color: #f2f2f2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s 0s, transform 0.3s 0s;
}
.modal-is-visible .cd-modal-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
}

.cd-modal {

position: fixed;

z-index: 2;

top: 0;

left: 0;

height: 100%;

width: 100%;

visibility: hidden;

transition: visibility 0s 0.6s;

}

.cd-modal.modal-is-visible {

visibility: visible;

transition: visibility 0s 0s;

}

.cd-cover-layer {

position: fixed;

z-index: 1;

top: 0;

left: 0;

height: 100%;

width: 100%;

background-color: #f2f2f2;

visibility: hidden;

opacity: 0;

transition: opacity 0.3s 0.3s, visibility 0s 0.6s;

}

.cd-cover-layer.modal-is-visible {

opacity: 1;

visibility: visible;

transition: opacity 0.3s 0s, visibility 0s 0s;

}

.cd-modal-content {

color: #f2f2f2;

opacity: 0;

transform: translateY(50px);

transition: opacity 0.3s 0s, transform 0.3s 0s;

}

.modal-is-visible .cd-modal-content {

opacity: 1;

transform: translateY(0);

transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;

}

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

modalTrigger.on('click', function(event){ //modalTrigger =  $('a[data-type="cd-modal-trigger"]')
	event.preventDefault();
	$([modal.get(0), coverLayer.get(0)]).addClass('modal-is-visible'); //modal = $('.cd-modal'), coverLayer = $('.cd-cover-layer')
	animateModal(pathsArray, pathSteps, duration, 'open');
});
 
function animateModal(paths, pathSteps, duration, animationType) {
	var path1 = ( animationType == 'open' ) ? pathSteps[1] : pathSteps[0], // pathSteps[n] = $('.cd-svg-bg').data('step'+(n+1));
		path2 = ( animationType == 'open' ) ? pathSteps[3] : pathSteps[2],
		path3 = ( animationType == 'open' ) ? pathSteps[5] : pathSteps[4];
	paths[0].animate({'d': path1}, duration, firstCustomMinaAnimation); //paths[0] = Snap('#cd-changing-path-1')
	paths[1].animate({'d': path2}, duration, firstCustomMinaAnimation); //paths[1] = Snap('#cd-changing-path-2')
	paths[2].animate({'d': path3}, duration, firstCustomMinaAnimation); //paths[2] = Snap('#cd-changing-path-3')
}

modalTrigger.on('click', function(event){ //modalTrigger = $('a[data-type="cd-modal-trigger"]')

event.preventDefault();

$([modal.get(0), coverLayer.get(0)]).addClass('modal-is-visible'); //modal = $('.cd-modal'), coverLayer = $('.cd-cover-layer')

animateModal(pathsArray, pathSteps, duration, 'open');

});

function animateModal(paths, pathSteps, duration, animationType) {

var path1 = ( animationType == 'open' ) ? pathSteps[1] : pathSteps[0], // pathSteps[n] = $('.cd-svg-bg').data('step'+(n+1));

path2 = ( animationType == 'open' ) ? pathSteps[3] : pathSteps[2],

path3 = ( animationType == 'open' ) ? pathSteps[5] : pathSteps[4];

paths[0].animate({'d': path1}, duration, firstCustomMinaAnimation); //paths[0] = Snap('#cd-changing-path-1')

paths[1].animate({'d': path2}, duration, firstCustomMinaAnimation); //paths[1] = Snap('#cd-changing-path-2')

paths[2].animate({'d': path3}, duration, firstCustomMinaAnimation); //paths[2] = Snap('#cd-changing-path-3')

}

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

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

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

Скачать скрипт модального окна

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

Кирил 13.04.2020 в 18:14

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

<script>var $j = jQuery.noConflict();</script>

1

<script>var $j = jQuery.noConflict();</script>

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

Ответить

Анимированное SVG модальное окно

👌 Модальное полноэкранное окно с анимированным 💥 эффектом.

ПОЛЕЗНАЯ РЕКЛАМА НА САЙТЕ

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

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

Анимированное SVG модальное окно

Как показать текущую дату на сайте?

Стильный видео фон для сайта

Простые вкладки для сайта на CSS3

Простое всплывающее окно для сайта

ПОЛЕЗНАЯ РЕКЛАМА НА САЙТЕ

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

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

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