Автор

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

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


 

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

 

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

 

Идея диалоговых состоит в том, чтобы создать кнопку запуска, щелчком по которому будет появляться модальное окно, используя простой переход с небольшой анимацией. Обратите внимание, что на данный момент существует проблема с использованием 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”. Затем вы можете добавить еще один набор стилей для конкретного эффекта.

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

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


vk.com/club.ssdru

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



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

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

Ранее в своём блоге, в статье «Невероятная наглость» я уже описывал ситуацию когда у меня спёрли весь контент с моего сайта и тогда всё решилось силами хостинга на котором распологался сайт клон! Сейчас всё обстоит совершенно иначе.


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

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


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

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


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

  1. Строить график на основе массива данных;
  2. Строить график на основе номер счетчика Яндекс.Метрики;
  3. Возможна частичная или полная кастомизация внешнего вида Информера;
  4. График строится с использованием html5 canvas;

75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close