Модальное окно с необычным эффектом
827материалов
228тем на форуме
3003комментария
6151пользователь

Модальное окно с необычным эффектом

Описание:

Здравствуйте, друзья. Сегодня мы хотим поделиться скриптом модального окна с красивыми и необычном эффектом. В интернете есть тьма-тьмущая различных вариаций модальных окон, так что каждый сможет найти своё. Идея представленного нами окна в том, что модальное окошко будет показываться только при клике на кнопку, картинку (элемент страницы); далее последует приятная фиолетовая анимация в виде облаков и собственно появляется симпатичное фиолетовое окно, в котором, кстати, можно разметить что угодно, хоть ссылки, хоть форму входа.

Установка модального окна:

Для начала скачиваете архив с нашего сайта, распоковываете его и папку cool-box загружаете в свой файловый менеджер.

Потом устанавливаем css перед закрывающим тегом </head>:
Код
<link rel="stylesheet" href="/cool-box/style.css">

Где хотите видеть ссылку для вызова окна вставляете код:
Код
<a href="#" class="cd-btn cd-modal-trigger">название окна</a>

Ни и нижнюю часть сайта, перед закрывающим тегом </body> вставляете код:
Код
<script src="/cool-box/main.js"></script>
<div class="cd-modal">
<div class="modal-content">
<h1>Немного о системе uCoz</h1>
<p>Содержимое окна.</p>
</div>
<a href="#0" class="modal-close">закрыть</a>
</div>      
<div class="cd-transition-layer">      
<div class="bg-layer"></div>
</div>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.05.2016 в 19:00
Материал просмотрен: 1356 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 7 комментариев

Пожаловаться
Сказать спасибо
Источник

7 комментариев


avatar
Как скрыть модер кнопки и меню? а то в модальном окне показывает.
Вот скриншот: http://s019.radikal.ru/i630/1609/35/e354eda048a2.jpg
Ромчик
Пробуйте.
Код
.cd-modal .visible {z-index:100000!important;}
avatar
Не помогло, crying
avatar
У тебя лишнее в коде: .visible , убираешь его и он работает! СПАСИБО БОЛЬШОЕ!!!
avatar
Здравствуйте!! Как сделать чтоб их было три разных??
avatar
Здравствуйте!! Как сделать чтоб их было три разных ссылки и три разных окон??
avatar
Здравствуйте!! Как сделать чтоб их было три разных ссылки и три разных окон??
в верхний правый угол в документах. Пожалуйста подскажите.
http://petrovkaschool.ucoz.ru/index/dokumenty/0-142
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта