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

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


Загрузить материал (2.3 Kb)
Источник
Ссылки

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

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

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

Дата и время публикации : 19.Июл.16 в 14:13 | Раздел : Прочее для uCoz


Параметр Значение
Дата публик. 19.Июл.16, Вторник, 14:13
Размер файла 2.3 Kb
Адапт. дизайн
Обновления Не производились
Просмотрен 300
Загружен 6

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



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

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

2) Потом устанавливаем css перед закрывающим тегом </head>: 

<link rel="stylesheet" href="/cool-box/style.css">

 

3) Где хотите видеть ссылку для вызова окна вставляете код: 

<a href="#" class="cd-btn cd-modal-trigger">название окна</a>

 

4) Ну и в нижнюю часть сайта, перед закрывающим тегом </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>

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

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


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

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

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

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

Minimal Soon - Страница технических работ

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