Примеры:
Демо 1
animatedIn: 'zoomIn',
animatedOut: 'bounceOut'
Демо 2
animatedIn: lightSpeedIn
animatedOut: bounceOutDown
Демо 3
animatedIn: bounceIn
animatedOut: bounceOut
Установка:
Добавляем на сайт стили animate.css, подробнее об этой библиотеке:
- Скачать: animate.min.css
Добавляем на страницу модальное окно и ссылку для его открытия:
|
1 2 3 4 5 6 7 8 9 |
<a id="open_window" href="#animatedModal">Открыть окно</a> <div id="animatedModal"> <div class="close-animatedModal"> Закрыть окно </div> <div class="modal-content"> Контент окна </div> </div> |
Это важно: чтобы закрыть окно, имя класса должно соответствовать имени, указанному в ID с префиксом close-
Добавляем библиотеку jQuery и скрипт animatedModal:
- Скачать: animatedModal.js
- Скачать: animatedModal.min.js
И подключаем:
|
1 |
$("#open_window").animatedModal(); |
Или с настройками, как в первом примере:
|
1 2 3 4 5 |
$("#open_window").animatedModal({ animatedIn:'zoomIn', animatedOut:'bounceOut', color:'#337AB7' }); |
Настройки:
| Название | По умолчанию | Возможные значения | Описание |
|---|---|---|---|
| color | #39BEB9 | HEX, HSL, RGB, RBA | Цвет фона модального окна |
| animatedIn | zoomIn | Подробнее тут | Эффект, когда окно открывается |
| animatedOut | zoomOut | Подробнее тут | Эффект, когда окно закрывается |
| animationDuration | .6s | seconds | Продолжительность анимации |
| overflow | auto | scroll; hidden; auto; | Убирать прокрутку страницы или нет |
Функции обратного вызова:
beforeOpen: function() {}
afterOpen: function() {}
beforeClose: function() {}
afterClose: function() {}
HTML и CSS кнопки закрытия из примеров:
|
1 2 3 |
<div class="close-animatedModal"> <img class="closebt" src="/img/closebt.svg"> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.close-animatedModal { position: relative; width:100%; text-align:center; margin-top:40px; } .closebt { transition: all 0.2s; cursor:pointer; } .closebt:hover { transform:rotate(90deg); } |
- Скачать: closebt.svg
Похожее модальное окно, но без использования jQuery и плагинов можно посмотреть в заметке: Простое модальное окно на JS
Автор: Joao Pereira
animatedModal.js на github
почему у меня окно сразу открывается
Не получается((
Привет! Прекрасный плагин, но реально ли снять с него зависимость от Jquery и сделать чтобы работало на Vanilla JS ?
В этом случае, наверное, проще вообще без плагинов.
Делаем полноэкранное окно, а по клику показываем его с нужным эффектом из animate.css
И соотв. также при закрытии
Я понимаю это может быть тяжело... но не сможешь показать готовый пример ? Я не соображу как без плагина...
Если время будет, накидаю сегодня статейку
По вашим заявкам 🙂
https://atuin.ru/blog/prostoe-modalnoe-okno-na-js/
Спасибо огромное!!! Ты очень сильно помог. Я чуток допилила твою реализацию, позже выложу на Codpen и поделюсь. Может тоже будет полезно...))
Привет!
Слушай... помогите пожалуйста. Окошечки реально крутые, спасибо большое!
Но можешь помочь ?
Мне нужно чтобы такое вот окошко находилось в фиксированном блоке т.е ширина блока 300 х 400 и следовательно, нужно чтобы это окно было внутри этого блока. К примеру я хочу поставить кнопочку: Информация и нажав на эту кнопку, внутри этого блока откроется это окошечко. Можно ли это реализовать ? :(( Я уже замучался искать модальные окна((( Большинство из них с такими косяками, что потом жесть происходит при настройке под себя...
Блин)) (Слушай… помогите пожалуйста. Окошечки реально крутые, спасибо большое!) - Тут опечатка)) От нервов уже не замечаю ошибок в грамматике))
а если
зафиксировать как нужно, где нужно и задать размеры, не получается?
Если нет, завтра попробуем на кодопене сделать.
Я на почту отправил письмо со скриншотом своего блока и HTML CSS разметкой и стилями. Надеюсь на помощь... я пытался, но у меня хрень получается...