Модальное окно JQuery & CSS3 + 22 эффекта появления! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryМодальное окно JQuery & CSS3 + 22 эффекта появления!
Дата: 17.07.2013 в 15:08 | Просмотров: 11568

Модальное окно JQuery & CSS3 + 22 эффекта появления!

модальное окно jquery, модальное окно на css, эффекты для сайта
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы рассмотрим 22 супер классных эффекта открытия модального окна. Модальное окно очень полезная вещь, так как помогает по крайней мере в 2-х отношениях: снижает нагрузку на сайт (Вам не нужно открывать например, форму регистрации или входа, в новом окне, заново грузить весь контент), а просто откроется окошко. Также это удобно и быстро для пользователя. В модальном окне можно разметить все, что пожелаете, вплоть до рекламы (но без фанатизма :) ).

Есть бесконечно много способов открытия модальных окон (мы будем говорить больше об эффектах открытия окна). Но сейчас хотелось бы поделиться с Вами некоторыми идеями, эффектами которые могут Вам понравиться или вдохновить на создание своих. Например, 2 других эффекта CSS Scale Transform смотрите здесь.

Идея состоит в том, чтобы иметь кнопку (или любой другой элемент блок, ссылка…), при нажатии на которое открывается модальное окно, с креативным эффектом анимации на JQuery и CSS3.

Пожалуйста, обратите внимание: это работает только в современных браузерах, поддерживающих соответствующие CSS3 свойства. Если у вас старый браузер, обновите его до последней версии!

Есть кто знает, есть некоторые проблема с использованием свойств visibility / opacity для IOS < 6 Mobile Safari, так что скорее всего, это не будет работать на старых устройствах.

HTML разметка

Структура модального окно состоит из основной обертки md-modal + других дополнительных классов и id, в зависимости от эффекта. Класс md-content включает все, что будет показано в окне, поэтому сюда Вы можете добавлять то, что Вам нужно (текст, изображение, форму, контакты…).

Все просто, в исходниках есть имена классов и id, добавляя которые к элементу или кнопке, и при нажатии Вы получите эффект появления модального окна.

CSS

Основные стили для всех окон (каждое модальное окно имеет класс .md-modal):

Для некоторых эффектов мы также добавим класс md-setperspective. Это необходимо для создания некоторых 3D эффектов, и применить их к body и контенту. Обратите внимание – мы предполагаем, что все содержимое страницы (за исключением модальных и обертки), завернуты в контейнере с классом container:

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

Все кнопки имеют атрибут data, который содержит ссылку на вид модального окна, на вид желаемого эффекта:

В некоторых случаях, мы также добавим класс md-setperspective для кнопки.

С помощью JavaScript мы добавляем класс md-show к соответствующему окну, когда мы нажимаем на кнопку, и, если указан класс md-perspective.

Экспериментируйте с новыми эффектами, добавляя новые кнопки и новые классы со стилями эффекта, а также меняя ID в данных атрибута data-modal. Затем вы можете добавить еще один набор стилей для этого конкретного эффекта.

Если вы только хотите, чтобы эффект transition анимации был только при появлении модального окна, но не тогда, когда оно исчезает, просто добавьте переход в .md-show.md-effect-x .md-content (как мы это делали для некоторых примеров).

Для эффекта размытия фона мы используем Polyfilter для поддержки старых браузеров.

Надеюсь, вам понравились эти маленькие идеи эффекта! Используйте, создавайте модальные окна и улучшайте свой сайт! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Dmitriy:
      http://www.just4life.com.ua/

      Кто-нибудь знает, как остановить видео (YouTube IFRAME) при закрытии модального окна?
      Смена IFRAME на старый код с object не помогла.
      Удалось только остановить с помощью перезагрузки страницы при закрытии модального окна, но это не совсем то, что нужно.
      У кого какие мысли?

      function removeModal( hasPerspective ) {
      document.location.reload();
      classie.remove( modal, ‘md-show’ );
      if( hasPerspective ) {
      classie.remove( document.documentElement, ‘md-perspective’ );
      }
      }

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