Remodal – jQuery-плагин для показа модальных окон
Очень простой в установке скрипт. Практически никак не нагружает сайт.
Работает быстро, адаптивен.
Установка
1. Скачиваем архив
2. Открываем архив, папка src файлы remodal.css и remodal-default-theme.css помещаем в папку со стилями. Файл remodal.js в папку js
3. Подключаем в main.tpl, перед строкой </head> вставляем следующее:
<link rel="stylesheet" href="{THEME}/css/remodal.css">
<link rel="stylesheet" href="{THEME}/css/remodal-default-theme.css">Папку css меняем на свою
Подключаем js файл, перед строкой </body>добавляем:
<script src="{THEME}/js/remodal.js"></script>Папку js меняем на свою
Готово! Плагин мы установили, а теперь о том как его использовать.
Работа с плагином.
1. Если хотим добавить эффект "Blur"(размытие) при появлении окна то в main.tpl после тега <body> добавляем:
<div class="remodal-bg">
...Содержимое тега <body>...
</div>2. Вывод окна. В нужное место вставляем:
<div class="remodal" data-remodal-id="modal">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Заголовок</h1>
<p>Содержимое модального окна</p>
<br />
<button data-remodal-action="cancel" class="remodal-cancel">Закрыть</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>Теперь вставляем кнопку вызова этого самого окна:
<a href="#modal">Call the modal with data-remodal-id="modal"</a>id - Указываем свой id для каждого окна и кнопки вызова!
Таким модальным окном можно вывести авторизацию и профиль пользователя, правила, чат, комментарии и т.д.
Ну вот и всё!
Более подробную информацию можете найти на Github странице автора.
