Гостевой вход

Вы не залогинились
23:42

12 вариантов стильных всплывающих окон уведомлений

Категория: Диалоги,overlay и lightbox

Метки: анимация, модальное окно
Приготовил для вас сегодня очередную вкусняшку! Эта подборка рецептов всплывающих окошек может вам пригодиться, и не раз! Дайте только волю фантазии, ведь с их помощью можно реализовать столько полезного!
Пока оформлял материал, на ум приходило и всплывающие контейнеры с ссылкой на скачивание, и окно онлайн-консультанта для продающего сайта, и окно о приходе нового сообщения и много,много,много еще чего!

Подготовка к установке на сайт

Скачайте архив по ссылке и загрузите к себе на сайт содержимое архива в одноимённые папки. Обратите внимание, что в папке fonts есть подпапки, которые также нужно создать.

Вариант 1

Демо (эффект bouncyflip)

В шапку страницы сайта, где будет выводиться всплывающее окно, вставить:

Код

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/ns-default.css" />
<link rel="stylesheet" type="text/css" href="css/ns-style-attached.css" />
<script src="js/modernizr.custom.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


в данном варианте, как и в остальных одиннадцати, которые я распишу ниже, файл demo.css необходим лишь для оформления элементов демо-страниц
Файлы normalize.css и modernizr.custom.js - это файлы css-стилей и библиотеки JavaScript Modernizr, призванные улучшить для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию и разрешить конфликты, вызванные разной степенью поддержки браузерами технологий HTML5 и CSS3, их мы будем подключать во всех вариантах.


в теле страницы в нужное место помещаем кнопку вызова окна, в данном случае для кнопки сделана анимация заполнения цветом, по окончании которой и происходит появление окна с информацией:

Код

<button id="notification-trigger" class="progress-button">
<span class="content">демо</span>
<span class="progress"></span>
</button>


Далее, в самом низу кода страницы размещаем два скрипта, которые, пожалуй, также будут присутствовать во всех вариантах разбираемых нами сегодня:

Код

<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>


и ниже этих двух файлов скриптов, подключаем скрипт запуска всплывающего окна:

Код

<script>
  (function() {
  var bttn = document.getElementById( 'notification-trigger' );

  // make sure..
  bttn.disabled = false;

  bttn.addEventListener( 'click', function() {
  // simulate loading (for demo purposes only)
  classie.add( bttn, 'active' );
  setTimeout( function() {

  classie.remove( bttn, 'active' );
   
  // create the notification
  var notification = new NotificationFx({
  message : '<span class="icon icon-calendar"></span><p>Добавлено новое событие в ваш календарь! <a href="#">Посмотреть</a>.</p>',
  layout : 'attached',
  effect : 'bouncyflip',
  type : 'notice', // notice, warning or error
  onClose : function() {
  bttn.disabled = false;
  }
  });

  // show the notification
  notification.show();

  }, 1200 );
   
  // disable the button (for demo purposes only)
  this.disabled = true;
  } );
  })();
  </script>


Содержимое всплывающего окна прописано в теле самого скрипта, здесь же можно сменить эффект, применяемый для появляющегося окошка, в этой строке скрипта:

Код

...
effect : 'bouncyflip',
...


Вместо bouncyflip можно поставить значение flip и это как раз и будет вариант два.

Вариант 2

Демо (эффект flip)

Вариант 3

Демо (эффект scale)

В шапку страницы:

Код

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/ns-default.css" />
<link rel="stylesheet" type="text/css" href="css/ns-style-growl.css" />
<script src="js/modernizr.custom.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Кнопка вызова всплывающего окна:

Код

<button id="notification-trigger" class="progress-button">
<span class="content">демо</span>
<span class="progress"></span>
</button>


В самый низ страницы сайта:

Код

<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
  (function() {
  var bttn = document.getElementById( 'notification-trigger' );

  // make sure..
  bttn.disabled = false;
   
  bttn.addEventListener( 'click', function() {
  // simulate loading (for demo purposes only)
  classie.add( bttn, 'active' );
  setTimeout( function() {

  classie.remove( bttn, 'active' );
   
  // create the notification
  var notification = new NotificationFx({
  message : '<p>На сайте PS-Studio.Info вы найдёте множество решений по веб-дизайну. <a href="http://ps-studio.info">Перейти на сайт.</a></p>',
  layout : 'growl',
  effect : 'scale',
  type : 'notice', // notice, warning, error or success
  onClose : function() {
  bttn.disabled = false;
  }
  });

  // show the notification
  notification.show();

  }, 1200 );
   
  // disable the button (for demo purposes only)
  this.disabled = true;
  } );
  })();
  </script>


Заменив в этой строке скрипта:

Код

...
effect : 'scale',
...


значение scale на jelly, мы получим вариант четыре.

Вариант 4

Демо (эффект jelly)

Вариант 5

Демо (эффект slide)

Этот вариант получается, если мы подставляем значение slide, по аналогии как мы это делали выше. Если же мы подставим значение genie, то получим шестой вариант.

Вариант 6

Демо (эффект genie)

Вариант 7 (всплывающий топ-бар с иконкой)

Демо

В шапку страницы сайта:

Код

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/ns-default.css" />
<link rel="stylesheet" type="text/css" href="css/ns-style-bar.css" />
<script src="js/modernizr.custom.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Кнопка вызова окна:

Код

<button id="notification-trigger" class="progress-button">
<span class="content">демо</span>
<span class="progress"></span>
</button>


В самый низ кода страницы:

Код

<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
  (function() {
  var bttn = document.getElementById( 'notification-trigger' );

  // make sure..
  bttn.disabled = false;

  bttn.addEventListener( 'click', function() {
  // simulate loading (for demo purposes only)
  classie.add( bttn, 'active' );
  setTimeout( function() {

  classie.remove( bttn, 'active' );
   
  // create the notification
  var notification = new NotificationFx({
message : '<span class="icon icon-megaphone"></span><p>На сайте PS-Studio.Info вы найдёте множество решений по веб-дизайну. <a href="http://ps-studio.info">Перейти на сайт.</a></p>',
  layout : 'bar',
  effect : 'slidetop',
  type : 'notice', // notice, warning or error
  onClose : function() {
  bttn.disabled = false;
  }
  });

  // show the notification
  notification.show();

  }, 1200 );
   
  // disable the button (for demo purposes only)
  this.disabled = true;
  } );
  })();
  </script>


заменив в строке скрипта

Код

...
effect : 'slidetop',
...


значение slidetop на exploader, мы получим вариант восьмой (топ-бар с строкой предзагрузки)

Вариант 8 (топ-бар с строкой предзагрузки)

Демо

Вариант 9 (уголок)

Демо

В шапку страницы сайта:

Код

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/ns-default.css" />
<link rel="stylesheet" type="text/css" href="css/ns-style-other.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


в тело страницы:

Код

<div class="notification-shape shape-box" id="notification-shape" data-path-to="m 0,0 500,0 0,500 -500,0 z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
<path d="m 0,0 500,0 0,500 0,-500 z"/>
</svg>
</div>

<button id="notification-trigger" class="progress-button">
<span class="content">демо</span>
<span class="progress"></span>
</button>


В самый низ кода страницы сайта:

Код

<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
  (function() {
  var svgshape = document.getElementById( 'notification-shape' ),
  s = Snap( svgshape.querySelector( 'svg' ) ),
  path = s.select( 'path' ),
  pathConfig = {
  from : path.attr( 'd' ),
  to : svgshape.getAttribute( 'data-path-to' )
  },
  bttn = document.getElementById( 'notification-trigger' );

  // make sure..
  bttn.disabled = false;

  bttn.addEventListener( 'click', function() {
  // simulate loading (for demo purposes only)
  classie.add( bttn, 'active' );
  setTimeout( function() {

  path.animate( { 'path' : pathConfig.to }, 300, mina.easeinout );

  classie.remove( bttn, 'active' );
   
  // create the notification
  var notification = new NotificationFx({
  wrapper : svgshape,
  message : '<p><span class="icon icon-bulb"></span> Множество решений по веб-дизайну вы найдёте на <a href="http://snapsvg.io/">Ps-Studio.Info</a></p>',
  layout : 'other',
  effect : 'cornerexpand',
  type : 'notice', // notice, warning or error
  onClose : function() {
  bttn.disabled = false;
  setTimeout(function() {
  path.animate( { 'path' : pathConfig.from }, 300, mina.easeinout );
  }, 200 );
  }
  });

  // show the notification
  notification.show();

  }, 1200 );
   
  // disable the button (for demo purposes only)
  this.disabled = true;
  } );
  })();
  </script>


Вариант 10 (предзагрузка "круг" перед окном сообщения)

Демо

В шапку подключаются те же файлы, что в предыдущем варианте. В тело страницы:

Код

<div class="notification-shape shape-progress" id="notification-shape">
<svg width="70px" height="70px"><path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/></svg>
</div>

<button id="notification-trigger" class="progress-button">
<span class="content">демо</span>
<span class="progress"></span>
</button>


ну и скрипты в нижней части кода страницы:

Код

<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
  (function() {
  var svgshape = document.getElementById( 'notification-shape' ),
  bttn = document.getElementById( 'notification-trigger' );

  // make sure..
  bttn.disabled = false;

  bttn.addEventListener( 'click', function() {
  // create the notification
  var notification = new NotificationFx({
  wrapper : svgshape,
  message : '<p>Ваше сообщение успешно отправлено!</p>',
  layout : 'other',
  effect : 'loadingcircle',
  ttl : 9000,
  type : 'notice', // notice, warning or error
  onClose : function() {
  bttn.disabled = false;
  }
  });

  // show the notification
  notification.show();

  // disable the button (for demo purposes only)
  this.disabled = true;
  } );
  })();
  </script>


Вариант 11 (предзагрузка "вращающийся квадрат" перед окном сообщения)

Демо

В шапку подключаем всё те же файлы, что и в варианте выше. В тело страницы сайта код вызова кнопки для окна:

Код

<button id="notification-trigger" class="progress-button">
<span class="content">демо</span>
<span class="progress"></span>
</button>


Скрипты, подключаем в самый низ кода страницы сайта:

Код

<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
  (function() {
  var bttn = document.getElementById( 'notification-trigger' );

  // make sure..
  bttn.disabled = false;

  bttn.addEventListener( 'click', function() {
  // create the notification
  var notification = new NotificationFx({
  message : '<p>Ваша ссылка на скачивание готова! <a href="http://tobiasahlin.com/spinkit/">Скачать</a></p>',
  layout : 'other',
  effect : 'boxspinner',
  ttl : 9000,
  type : 'notice', // notice, warning or error
  onClose : function() {
  bttn.disabled = false;
  }
  });

  // show the notification
  notification.show();

  // disable the button (for demo purposes only)
  this.disabled = true;
  } );
  })();
  </script>


Вариант 12 (всплывающее окно с картинкой)

Демо

В шапке файлы подключаем те же. В тело страницы:

Код

<!-- Здесь прописываем путь к изображению, которое появится перед всплывающим окном -->
<div style="overflow: hidden; opacity: 0; width: 0px; height:0px;"><img src="img/user1.jpg" /></div>

<button id="notification-trigger" class="progress-button">
<span class="content">демо</span>
<span class="progress"></span>
</button>


И скрипты в самый низ кода страницы:

Код

<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
  (function() {
  var bttn = document.getElementById( 'notification-trigger' );

  // make sure..
  bttn.disabled = false;
   
  bttn.addEventListener( 'click', function() {
  // simulate loading (for demo purposes only)
  classie.add( bttn, 'active' );
  setTimeout( function() {

  classie.remove( bttn, 'active' );
   
  // create the notification
  var notification = new NotificationFx({
  message : '<div class="ns-thumb"><img src="img/user1.jpg"/></div><div class="ns-content"><p>Привет! Это уведомление с картинкой!</p></div>',
  layout : 'other',
  ttl : 6000,
  effect : 'thumbslider',
  type : 'notice', // notice, warning, error or success
  onClose : function() {
  bttn.disabled = false;
  }
  });

  // show the notification
  notification.show();

  }, 1200 );
   
  // disable the button (for demo purposes only)
  this.disabled = true;
  } );
  })();
  </script>


Надеюсь, вам понравились эти великолепные всплывающие окошки для уведомлений и вы найдёте им достойное применение в своих проектах!

Просмотров: 418 | Скачиваний: 8 | Комментариев: 0 | Рейтинг: 5.0/Оценок: 1

Материалы схожей тематики

    Hover.css - набор CSS3 эффектов для элементов страницы сайта

    Hover.css представляет собой таблицу CSS-стилей, применимых к различным элементам на странице сайта (ссылкам, кнопкам, логотипам, SVG и просто изображениям), дающих в итоге различные визуальные эффекты, как то: трансформация, фоновые и граничные переходы, тени и свечение, пузыри и загнутые уголки и прочее. Вся прелесть в том, что вам достаточно подключить файл стилей hover.css на страницах своего сайта и прописать для нужных элементов страниц соответствующие эффектам классы и всё, можете любоваться!

    Набор эффектов на CSS для модальных окон - Часть 2

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

    Набор эффектов на CSS для модальных окон

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

    Красивая форма авторизации с анимацией иконок

    Симпатичная форма авторизации, отличное сочетание цветов, главной изюминкой формы являются выезжающие слева от полей ввода иконки, визуально дублирующие назначение данного поля. Например, для поля username выводится иконка человечка, для поля password иконка замка.

    Прогресс-бар с плавной загрузкой на CSS

    Симпатичный прогресс-бар, отражающий какую-то информацию, например результаты какого-либо опроса, в виде плавно загружающихся разноцветных индикаторов (полос). В данном примере не используется JavaScript, всё реализовано только на CSS.

Онлайн статистика

11.12.2017

Понедельник

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: