Эластичное модальное окно
Добавлено 20.04.2016 в 18:23
Эластичное модальное окно
Сегодня у нас речь пойдет о такой, довольно простой и распространенной вещи, как модальные окна и о том, как сделать собственное модальное окно, которое появляется с отличным эффектом и становится эластичным при попытке перетащить его куда-либо по странице. Модальные окна используются для того чтобы показать пользователю какое-либо уведомление, важную информацию о сайте или запросить ввод любой информации (например обратная связь) в виде красивого всплывающего блока на странице.

Установка:

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>


Осталось лишь залить три JS файла из прикреплённого архива в папку js и CSS файл в папку css

Источник - tympanus.net
К материалу оставили 0 комментариев