• 1608
  • 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.Ну вот и все,в остальных вариантах все делается аналогично,если будут вопросы пишите комменты

Можешь почитать и вот эту статейку "Интересный адаптивный слайдер "

mistakes

Это тоже интересно

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

Ваше мнение

TWIG -что это?
Результаты

----