Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

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

Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

Простое красивое модальное окно для uCoz

Дата и время публикации : 21.Дек.17 в 02:56 | Раздел : Прочее для uCoz


Параметр Значение
Дата публик. 21.Дек.17, Четверг, 02:56
Адапт. дизайн
Обновления Не производились
Просмотрен 39

Редко у нас появляются материалы с модальными окнами, поэтому сегодня хотелось бы поделится полезным материалом а именно простым но красивым модальным окном на чистом CSS для uCoz.

Установка :

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

<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>


2. В стили 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;}


На этом установка окончена.


Для того, чтобы создать несколько модальных окон на одной странице - нужно чтобы 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>


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;}


Вот и все.

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Шаблон DevBlog для uCoz

Очень простой шаблон для uCoz под названием DevBlog. Имеет адаптивный дизайн, что позволит читать посты пользователям с любого устро...