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

Наверх!
Простое модальное окно на чистом CSS
Демо Скачать
Доп. услуги
Дополнительно

Описание

Простое модальное окно созданное на чистом CSS3 без использования сторонних скриптов.
Вы сможете с лёгкостью добавить окно на свой сайт и изменить под сайт.

Установка:
В удобное для Вас место добавьте следующий код:

Код
<div class="modal">  
  <a href="#modal" class="open">Открыть окно</a>  
  <div class="modal_content" id="modal">  
  <div class="title">Текст Вашего окна.</div>  
  <a href="#" class="close">Закрыть</a>  
  </div>  
  </div>



После зайдите в ПУ > Управление дизайном > Таблица стилей (CSS) и вставьте в самый низ этот код:

Код
/* Общий стиль ссылок */  
  .modal a {display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; text-decoration: none !important; margin: 10px auto 0; box-shadow: 0 0 0 1px #fff; color: #fff; transition: opacity .4s;}  

  /* Общий стиль ссылок при наведение */  
  .modal a:hover, .modal a:active {opacity: .6;}  

  /* Стиль для кнопки "Открыть окно" */  
  .modal a.open {background: #07f;}  

  /* Стиль для кнопки "Закрыть" */  
  .modal a.close {background: #FF3D1E;}  

  /* Не трогать! Это для того, чтобы окно было по центру. */  
  .modal .modal_content {left: 0; top: 0; right: 0; bottom: 0; margin: auto;}  

  /* Стиль окна */  
  .modal .modal_content {position: fixed; display: block; background: #fff; padding: 20px; width: 250px; height: 100px; box-shadow: 0 5px 0 0 #07f inset, 0 0 0 1000px rgba(34,34,34,.65); text-align: center; font-size: 15px; line-height: 1.5;}  

  /* Эффект исчезновения для окна */  
  #modal:not(:target) {opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;}  

  /* Эффект появления для окна */  
  #modal:target {opacity: 1; visibility: visible; transition: opacity .4s, visibility .4s;}



На этом с установкой всё.

P.s.
Для того, чтобы создать несколько модальных окон на одной странице - нужно чтобы id модального окна отличался от другого, ну и ссылка открытия соответственно, и добавить новое окно в CSS.

Пример:
HTML:

Код
<div class="modal">  
  <a href="#modalONE" class="open">Открыть окно</a>  
  <div class="modal_content" id="modalONE">  
  <div class="title">Текст Вашего окна.</div>  
  <a href="#" class="close">Закрыть</a>  
  </div>  
  </div>  

  <div class="modal">  
  <a href="#modalTWO" class="open">Открыть окно</a>  
  <div class="modal_content" id="modalTWO">  
  <div class="title">Текст Вашего окна.</div>  
  <a href="#" class="close">Закрыть</a>  
  </div>  
  </div>



CSS:

Код
#modalONE:not(:target), #modalTWO:not(:target) {opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;}  
  #modalONE:target, #modalTWO:target {opacity: 1; visibility: visible; transition: opacity .4s, visibility .4s;}

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-36
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2017 года.
Установку скрипта или его изменение можно заказать через:
VK
Telegram
Комментарии
Комментов нет.. Печально. Может оставишь свой коммент?
Комментарии могут оставлять только зарегистрированные пользователи.