Отборочные материалы системы uCoz

Главная » Файлы » Скрипты для Ucoz

Модальное окно “Motion” с SVG эффектом
[ · Скриншот ] 05.10.2016, 16:00
Сейчас довольно трудно представить себе сайт, где были бы не нужны модальные окна. Пользовательские диалоги, отправка и приём данных, уведомления, предупреждения, подсказки — всё это может появляться в виде всплывающих окон на самых разных сайтах, от развлекательных до корпоративных. Используя представленные в нашей коллекции скрипты, вы сможете без лишней нагрузки организовать работу вплывающих окон на своём сайте. Простое, и в тоже время необычное модальное окно с помощью элементов SVG. Данный тип веб-графики очень стремительно набирает обороты, а современные технологии помогают делать потрясающие вещи. Модальное окно с эффектом при появлении. Поддержка IE9+

Установка:

Между head и /head вставляете код:

Код
<script src="/js/menu/menu.min.js"></script>
  <style>
  .content {
text-align: center;
  }

  .modal-overlay {
background: rgba(60, 63, 78, 0.9);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
visibility: hidden;
  }

  .modal-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
pointer-events: none;
  }

  .modal {
background: #fff;
color: #666871;
text-align: center;
width: 400px;
max-width: 90%;
height: 250px;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
margin: auto;
padding: 40px;
pointer-events: auto;
font-weight: bold;
visibility: hidden;
  }

  @media screen and (max-width: 40em) {
.modal { height: 350px; }
  }

  .modal h2 {
font-size: 2.25em;
margin: 0.5em 0 0.25em;
color: #BDBFCA;
font-family: 'Lustria', 'Goudy Old Style', Garamond, 'Big Caslon', 'Times New Roman', serif;
  }

  /* Buttons */
  .open-modal {
border: none;
margin: 3em 0 7em 0;
background: #7D87AE;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 20px;
padding: 1em 2em;
font-weight: bold;
border-radius: 40px;
-webkit-transition: background 0.3s;
transition: background 0.3s;
  }

  .open-modal:hover {
background: #6d78a5;
  }

  .close-modal {
color: #aaa;
background: none;
position: absolute;
top: 10px;
right: 10px;
border: none;
width: 20px;
height: 20px;
line-height: 15px;
font-size: 22px;
font-weight: bold;
  }

  .close-modal:hover {
color: #666871;
  }
  </style>


Код окна в нижнюю часть сайта перед /body вставляете код меню:
Код
<div class="modal-overlay"></div>
<div class="modal-wrapper">
<div class="modal js-blur">
<button class="close-modal">×</button>
<h2>uCoz Web Services</h2>
<p>uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием. Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта, так и по отдельности, например, в качестве блог-платформы, интернет-магазина и др. К 2014 году на его основе было создано более 20 млн страничек (из них активны были около 1 млн), на отдельных доменах работали 54 тыс. сайтов. uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet.</p>

  <p>Владелец сервиса — ООО «Юкоз Медиа», Россия.</p>
</div>
</div>
</div>


Там же в нижней части сайта перед вставляете код:
Код
<script src="http://webmaster-ucoz.ru/ucoz/js/menu/motionblur.js"></script>
  <script src="http://webmaster-ucoz.ru/ucoz/js/modal.js"></script>
Категория: Скрипты для Ucoz | Добавил: youCoz | Теги: эффектом, “Motion”, окно, SVG, Модальное
Просмотров: 535 | Загрузок: 0 | Рейтинг: 5.0/2
Всего комментариев: 0
Имя *:
Email:
Подписка:1
Код *: