Хаки и Скрипты Next Generation CMS

Эффекты для диалоговых модальных окон вашего сайта

irbees2008 irbees2008 Опубликовано - 7 - января Диалоги и lightbox
4099 - 1
  • Автор: Мэри Лу
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Вот новинка от tympanus.net.Небольшая коллекция диалоговых эффектов с помощью CSS анимации для вашего вдохновения. Некоторые эффекты используют SVG анимации с помощью Snap.svg.Вот сегодня и добавим их На наш сайт.
Итак приступим:
1. Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем ,запускаем исходник и выбираем понравившийся эффект,смотрим исходник и заливаем нужный файл стиля ,я выбрал dialog-sandra.css и заливаем в папку css вашего шаблона,заливаем папку js и font в папку вашего шаблона.
2.Я выбрал первый вариант и в редакторе открываю index.html,и по нему буду делать подключение.
3.В файл main.tpl в хеад подключаем

Код:
<!-- common styles -->
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/dialog.css" />
<!-- individual effect -->
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/dialog-sandra.css" />
<script src="{{ tpl_url }}/js/modernizr.custom.js"></script>
Это мы подключили основной стиль окна ,стиль с эффектом для окна и скрипт шрифта.
4.Перед закрытием тега body добавляем сам код блока окна и скрипты необходимые для работы нашего окна.
Код:
<div id="somedialog" class="dialog">
<div class="dialog__overlay"></div>
<div class="dialog__content">
<h2><strong>Привет</strong>, Я диалоговое окошко </h2><div><button class="action" data-dialog-close>Close</button></div>
</div>
</div>
<!-- Related demos -->

</div><!-- /content -->
</div><!-- /container -->
<script src="{{ tpl_url }}/js/classie.js"></script>
<script src="{{ tpl_url }}/js/dialogFx.js"></script>
<script>
(function() {

var dlgtrigger = document.querySelector( '[data-dialog]' ),
somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
dlg = new DialogFx( somedialog );

dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

})();
</script>
5.Ну и сама кнопка вызова нашего окошка
Код:
<button data-dialog="somedialog" class="trigger">Открыть окно</button>
6.Ну вот и все,в остальных вариантах все делается аналогично,если будут вопросы пишите комменты

Можешь почитать и вот эту статейку "Хак - Highslide JS - модные превьюшки"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 34
  • Генерация страницы: 0.614сек
  • Потребление памяти: 5.164 Mb 
  •   Яндекс.Метрика