» »

Модальное окно на SVG эффекте для сайта

Модальное окно на SVG эффекте для сайта

Красивое появление модального окна всегда привлекает, если еще несет нужную информацию, что по эффекту здесь сделано просто чудесно. Оно по клику появится с левой стороны и если вам нужно закрыть, то жмем крестик и оно резко съезжает в правую сторону. Но не возможно посещаемый сайт или который реально сделан для пользователя, представить, что на этом ресурсе нот такого окна или похожего. Так как информацию можно в нем любую прописать и поставить кнопку с названием, что когда нужно вызвать его. Это могут быть как подсказки, которые написаны администрацией или стоять оператор, что будет выводить статистику, что сказать, это продолжение сайта, как в контейнере блок, только все по установке немного по другому, которая не слишком отличается от простого скрипта, который идет со стилями, что здесь в таком же плане.

Здесь безусловно красивый и неповторимый эффект появление его на портале, где стразу по сторонам идет затемнение, чтоб не сего не отвлекало. Его можно сделать под свой дизайн и выставить стиль на оттенок цвета. Если оно по умолчанию идет в светлой гамме, то выставляем в CSS, что с ним идет темный цвет и уже в черном оттенке. Саму кнопку вызова можно ставить как в любой блог или в низ сайта и также вверх. Проверяя его на тестовом сайте и установив, все опишу подробно. Так как основном на такие окна установка идет не слишком сложная, просто читаем и ставим как написано, а точнее все разместил в низ сайта, чтоб можно было вызвать на любой странице.

Здесь в темный цвет выставил и знаки в серый.

Модальные окна с красивыми эффектом

Приступаем к установке:

Ставил в низ сайта между head script и css /head и выставляем скрипт со стилями.

Код
<script src="http://zornet.ru/zorner_ru_1/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 устанавливаем, если body нет, то ниже прописываем каркас с описанием.

Код
<div class="modal-overlay"></div>  
  <div class="modal-wrapper">  
  <div class="modal js-blur">  
  <button class="close-modal">×</button>  
  <h2>Это заголовок, что в выше идет</h2>  
  <p>Здесь будет описание, что автоматически будет выводить по центру, но если не делать в колонки или по другому формату</p>  
  <p>Администрация сайта ZORNET.Ru</p>  
  </div>  
  </div>  
  </div>

И там же остаемся и не куда не уходим и нам нужно найти /body и если опять нет, то также продолжаем прописывать ниже.

Код
<script src="http://zornet.ru/zorner_ru_1/motionblur.js"></script>  
  <script src="http://zornet.ru/zorner_ru_1/modal.js"></script>

И осталось поставить кнопку вызова, устанавливаем там где нужно.

Код
<button class="open-modal">По клику появиться окно</button>

Все сохраняем и обновляем страницу и вызываем окно, и потом его можно редактировать по дизайн, чтили все идут открытые, что будет не сложно вывести оттенок или закруглить углы.
24.06.2017 Просмотров: 683 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar