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

Можешь почитать и вот эту статейку "HTML теги b и strong"

mistakes

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

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

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Облако тегов

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