Главная » Каталог » Диалоги,overlay и lightbox » 12 вариантов стильных всплывающих окон уведомлений

Диалоги,overlay и lightbox

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



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

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

Скачайте архив по ссылке и загрузите к себе на сайт содержимое архива в одноимённые папки. Обратите внимание, что в папке 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>


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

Другие материалы:

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

    12.11.2016

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

    Комментарии: 0   Просмотры: 260

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

    18.10.2016

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

    Комментарии: 0   Просмотры: 263

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

    17.10.2016

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

    Комментарии: 0   Просмотры: 327

Теги материала

Хостинг от uCoz