Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Скрипты для uCoz [113]Графика для uCoz [11]
Шаблоны для uCoz [40]
Модальное окно
Сегодня мы хотим поделиться скриптом модального окна с красивыми и необычном эффектом. В интернете есть тьма-тьмущая различных вариаций модальных окон, так что каждый сможет найти своё. Идея представленного нами окна в том, что модальное окошко будет показываться только при клике на кнопку, картинку (элемент страницы); далее последует приятная фиолетовая анимация в виде облаков и собственно появляется симпатичное фиолетовое окно, в котором, кстати, можно разметить что угодно, хоть ссылки, хоть форму входа.

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

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


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


Ни и нижнюю часть сайта, перед закрывающим тегом вставляете код:
Код
<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>
Скачать файл 2.3Kb
Поделиться новостью в социальной сети.
Имя файла:
Размер: 2.3Kb
Добавил: Best_Studio
Дата добавления: 23.05.2016 в 09:16 по МСК
Категория: Скрипты для uCoz
Скачиваний: 101
Просмотров: 289
Комментариев: 0
Рейтинг:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]