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

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

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

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

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

Перезагрузите страницу
Скрипты для uCoz [115] Графика для uCoz [11]
Шаблоны для uCoz [40] posts [0]
Эластичное модальное окно
Сегодня у нас речь пойдет о такой, довольно простой и распространенной вещи, как модальные окна и о том, как сделать собственное модальное окно, которое появляется с отличным эффектом и становится эластичным при попытке перетащить его куда-либо по странице. Модальные окна используются для того чтобы показать пользователю какое-либо уведомление, важную информацию о сайте или запросить ввод любой информации (например обратная связь) в виде красивого всплывающего блока на странице.

Установка:


1. После /head на нужных страницах вставьте:
Код

<link rel="stylesheet" type="text/css" href="/css/dialog.css" />  
<script type='text/javascript' src="/js/dynamics.min.js"></script>  
<script type='text/javascript' src="/js/draggabilly.pkgd.min.js"></script>  
<script type='text/javascript' src="/js/main.js"></script>  
<script>  
(function() {  
var dialog = new DialogEl(document.getElementById('dialog-1'), {  
mainElement: {  
minscale: 0.6,  
minopacity: 0.5,  
//rX : 30,  
rY: 40  
},  
innerElements: {  
tx: 100,  
ty: 100  
},  
// the element is considered out of bounds if its center (x,y) is either  
// x < outofbounds.x or x > win.width-outofbounds.x or  
// y < outofbounds.y or y > win.height - outofbounds.y  
outofbounds: {  
x: 0,  
y: 0  
}  
});  

document.getElementById('trigger-dialog').addEventListener('click', function(ev) {  
dialog.open();  
});  
})();  
</script>


2. Диалоговое окно и кнопку, его открывающую, оформляем так:
Код

<div class="content">  
<button id="trigger-dialog" class="button button--dialog">Открыть окно</button>  
</div>  
<div class="dialog" id="dialog-1">  
<div class="mover-wrap dialog__content">  
<div class="handle"></div>  
<div class="mover">  
<div class="dialog__content-inner">  
<div class="dialog__header">  
<h2>Заголовок окна</h2>  
<button class="action action--close">  
<i class="icon icon--cross"></i>  
x  
</button>  
</div>  
<div class="dialog__body">  
<div class="actions">  
<div class="mover__element">  
<a href="#" class="action action--fav">  
<span class="action__title">webmaster-ucoz.ru</span>  
<span class="action__subline">Только лучшие скрипты</span>  
</a>  
</div>  
<div class="mover__element">  
<a href="#" class="action action--download">  
<span class="action__title">Заголовок</span>  
<span class="action__subline">Описание заголовка</span>  
</a>  
</div>  
<div class="mover__element">  
<a href="#" class="action action--share">  
<span class="action__title">Заголовок 2</span>  
<span class="action__subline">Описание заголовка 2</span>  
</a>  
</div>  
</div>  
</div>  
<div class="dialog__footer">  
<a href="#">Я - ссылка</a>  
</div>  
</div>  
</div>  
</div>  
</div>
Скачать файл 17.7 Kb
Поделиться новостью в социальной сети.
Источник: http://tympanus.net/
Имя файла:
Размер: 17.7 Kb
Добавил: Best_Studio
Дата добавления: 10.01.2016 в 23:00 по МСК
Категория: Скрипты для uCoz
Скачиваний: 229
Просмотров: 670
Комментариев: 0
Рейтинг:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]