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

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

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

Можешь почитать и вот эту статейку "Верстаем на Twitter Bootstrap"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [8]
  • Гости: [8]
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 0.156сек
  • Потребление памяти: 4.943 Mb 
  •   яндекс.ћетрика