подборка модальных окон

Подборка всплывающих модальных окон на сайт с интересными эффектками

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

Для новичков о модальных окнах

Модальное окно на сайте — это независимый блок, которые появляется на экране пользователя в браузере при выполнении какого-либо события. Как правило, такой блок имеет приоритет по отображению перед другими элементами на сайте. Случаи, когда Вы могли бы наблюдать явление всплывающего модального окна:

  • при нажатии на кнопку «заказать», «позвонить» и т.д., появляется контейнер с формой обратной связи;
  • при заходе на сайте владелец сообщает Вам важную (по его мнению) информацию — акции, скидки, подписки;
  • диалоговые модальные окна — при работе с сайтом.

Итак, нудная теория подошла к концу, давайте посмотрим, что мы приготовили сегодня.

Эффекты при вызове модального окна

1. https://codepen.io/designcouch/full/obvKxm/

Пример 1

Семь разных примеров появления боксов с контентом. Почти все эффекты выглядят свежо и привлекательно. Используется jQuery.

Скачать исходники.

2. https://codepen.io/MichaelRyanSmith/full/YPeopY/

Пример 2

В данном пример нам предлагает лишь один эффект, однако, весьма достойный. Задумка автора направленна 3-D появление окна. И ему это удалось.

Скачать исходники.

3. https://codepen.io/ettrics/full/Jdjdzp/

Пример 3

Три варианта появления всплывающего модального окна с высокой производительностью. Второй вариант удобно использовать для боксов с массивным контентом.

Скачать исходники.

4. https://codepen.io/losbeekos/full/cmqaL/

Пример 4

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

Скачать исходники.

5. https://codepen.io/mmellado/full/zBrVwk/

Пример 5

Эффектной появление окна с контентом путем заполнение пространства страницы цветной заливкой. Без svg.

Скачать исходники.


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

В поисках шаблона для сайта?