Автор

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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 1. HTML

Для начала нам необходимо создать разметку модального окна, кроме этого у нас буду в диалоговом окне несколько кнопок:

<div class="md-modal md-effect-1" id="modal-1">
 <div class="md-content">
 <h3>Модальное окно</h3>
 <div>
 <p>Заголовок:</p>
 <ul>
 <li><strong>Читать:</strong> Описание.</li>
 <li><strong>Смотреть:</strong>Описание.</li>
 <li><strong>Закрыть:</strong>Нажмите, чтобы закрыть.</li>
 </ul>
 <button class="md-close">Закрыть!</button>
 </div>
 </div>
</div>
...
<div class="md-overlay"></div>

Для основной оболочки будем использовать контейнер, который будем просто показывать или скрывать, а также у внутреннего содержания будет определенный переход.

 

Шаг 2. CSS

 

Теперь разберемся со стилями. У нас будет происходить  наложение которое будет находиться после модального окна, таким образом, мы можем управлять появлением, используя смежный селектор:

.md-modal {
 position: fixed;
 top: 50%;
 left: 50%;
 width: 50%;
 max-width: 630px;
 min-width: 320px;
 height: auto;
 z-index: 2000;
 visibility: hidden;
 backface-visibility: hidden;
 transform: translateX(-50%) translateY(-50%);
}

.md-show {
 visibility: visible;
}

.md-overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 visibility: hidden;
 top: 0;
 left: 0;
 z-index: 1000;
 opacity: 0;
 background: rgba(143,27,15,0.8);
 transition: all 0.3s;
}

.md-show ~ .md-overlay {
 opacity: 1;
 visibility: visible;
}

Для некоторых эффектов мы также будем добавлять классы в HTML элементы. Это необходимо для создания 3D-эффектов.

.md-perspective,
.md-perspective body {
 height: 100%;
 overflow: hidden;
}

.md-perspective body {
 background: #222;
 perspective: 600px;
}

.container {
 background: #e74c3c;
 min-height: 100%;
}

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

.md-show.md-effect-5 ~ .md-overlay {
 background: rgba(0,127,108,0.8);
}

.md-effect-5 .md-content {
 transform: scale(0) rotate(720deg);
 opacity: 0;
 transition: all 0.5s;
}

.md-show.md-effect-5 .md-content {
 transform: scale(1) rotate(0deg);
 opacity: 1;
}

Мы будем использовать JavaScript чтобы добавим класс “md-show” в соответствующее модальное окно, когда мы нажимаем на кнопку, передаем класс “md-perspective” HTML элементу.

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

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

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


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

Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.


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

Смелая навигация, слайд-шоу, когда активна, заменяет текущий контент в трехмерном пространстве.


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

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close