регистрация
856материалов
3264комментария
230тем на форуме
6748пользователей

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

Описание:

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

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

Для начала скачиваете архив с нашего сайта, распоковываете его и папку 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
Материал просмотрен: 1759 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 13 комментариев

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

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


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

http://petrovkaschool.ucoz.ru/index/dokumenty/0-142
yar-kolgotki
Анимация не работает
Oksana
Оксана @Oksana 06.03.2017 21:029
0
Работает, только что проверяла
1 2 »
avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединились: 2 человека
Пользователи и гости сейчас онлайн: 4 Сегодня наш портал посетили: чел
Сейчас на сайте: trem
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 4
Гостей: 3
Пользователей: 1