Модальное окно с необычным эффектом
Описание:
Здравствуйте, друзья. Сегодня мы хотим поделиться скриптом модального окна с красивыми и необычном эффектом. В интернете есть тьма-тьмущая различных вариаций модальных окон, так что каждый сможет найти своё. Идея представленного нами окна в том, что модальное окошко будет показываться только при клике на кнопку, картинку (элемент страницы); далее последует приятная фиолетовая анимация в виде облаков и собственно появляется симпатичное фиолетовое окно, в котором, кстати, можно разметить что угодно, хоть ссылки, хоть форму входа.
Установка модального окна:
Для начала скачиваете архив с нашего сайта, распоковываете его и папку cool-box загружаете в свой файловый менеджер.
Потом устанавливаем css перед закрывающим тегом </head>:
Где хотите видеть ссылку для вызова окна вставляете код:
Ни и нижнюю часть сайта, перед закрывающим тегом </body> вставляете код:
Здравствуйте, друзья. Сегодня мы хотим поделиться скриптом модального окна с красивыми и необычном эффектом. В интернете есть тьма-тьмущая различных вариаций модальных окон, так что каждый сможет найти своё. Идея представленного нами окна в том, что модальное окошко будет показываться только при клике на кнопку, картинку (элемент страницы); далее последует приятная фиолетовая анимация в виде облаков и собственно появляется симпатичное фиолетовое окно, в котором, кстати, можно разметить что угодно, хоть ссылки, хоть форму входа.
Установка модального окна:
Для начала скачиваете архив с нашего сайта, распоковываете его и папку 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>
<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
Материал просмотрен: 1873 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 13 комментариев
|
|
Другие разделы нашего сайта
Хотите сайт всего за 10 дней?
Полезная информация о uCoz
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединились: 0 человек
Пользователи и гости сейчас онлайн: 1
Сегодня наш портал посетили: чел
Онлайн всего: 1
Гостей: 1
Пользователей: 0
13 комментариев