Эластичное модальное окно
827материалов
228тем на форуме
3004комментария
6159пользователей

Эластичное модальное окно


Описание:

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

Установка:

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

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 10.01.2016 в 16:00
Материал просмотрен: 1490 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 12 комментариев

Пожаловаться
Сказать спасибо
Источник

12 комментариев


prytulko
Віктор @prytulko 10.01.2016 16:021
-6
Замотали своими окнами, давайте шаблоны, да побольше
Ромчик
Что же вы такой наглый и грубый, шаблоны будут, но позже.
ralland136
Максим @ralland136 10.01.2016 16:283
+3
Красивое окно, спасибо like
avatar
можно ли сделать так что бы при добавление новостей добавлялись теги автоматически ( знаю что есть такой скрипт но он для каталога файлов хотелось бы для новостей если это возможно )
Ромчик
Ну конечно можно
Код
<?if($PAGE_ID$ != "edit")?><script type="text/javascript">$.getScript('http://webmaster-ucoz.ru/w-u/js/title_tegs_brife.js');</script><?endif?>

Подходит для всех модулей
LANIGIRO
Demo#2 тоже очень прикольный) Жека Знахарев, сможешь его тоже адаптировать под систему Юкоз? cool
ДонКот
Во втором случае не модальное окно, а ручной слайдер, конечно же, попробую и обновлю пост, если это будет иметь интерес)
Oлer
Олег Марков @Oлer 15.01.2016 23:148
0
Красиво! Спасибо. Лично для меня есть один минус: нужно загружать самостоятельно скрипты на свой сайт. Вот бы ссылки на скрипты и ксс были внешними.
Ромчик
На оборот это плюс) Мало ли что потом в эти CSS и JS пихнут) А когда файлы загружены на ваш сайт, то так безопаснее и надежнее будет!
ДонКот
это не минус, а плюс. вдруг у меня будет злой умысел завладеть вашими данными от сайта? а тут я засуну в скрипт вирусню и баста
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта