Адаптивные и лёгкие модальные окна ReModal




Remodal – jQuery-плагин для показа модальных окон
Очень простой в установке скрипт. Практически никак не нагружает сайт.
Работает быстро, адаптивен.

Установка

1. Скачиваем архив - remodal-1.1.0.zip
2. Открываем архив, папка src файлы remodal.css и remodal-default-theme.css помещаем в папку со стилями. Файл remodal.js в папку js
3. Подключаем в main.tpl, перед строкой </head> вставляем следующее:

<link rel="stylesheet" href="/templates/FDv2/css/remodal.css">
<link rel="stylesheet" href="/templates/FDv2/css/remodal-default-theme.css">
Папку css меняем на свою
Подключаем js файл, перед строкой </body> добавляем:
 <script src="/templates/FDv2/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 странице автора.

 скачать dle 11.1смотреть фильмы бесплатно


модальное окно

Внимание!

Ознакомьтесь со статьёй по ссылке ниже.

Сайт мошенников
Информация