Простое модальное окно или поп ап (Pop Up)

Задача:

Как сделать простое всплывающее окно при помощи плагина Remodal на jQuery

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


Простое модальное окно или поп ап (Pop Up)

Решение:
1 Скачиваем плагин Remodal по ссылке

2 Распаковываем архив, из папки /dist/ копируем remodal.min.js в шаблон сайта в папку /js/

3 Копируем файлы стилей remodal.css и remodal-default-theme.css из /dist/ в шаблон сайта в папку /css/

4 Подключаем стили, вставим между тегами <head>...</head>
<link rel="stylesheet" href="../css/remodal.css"> <link rel="stylesheet" href="../css/remodal-default-theme.css">
5 Подключим js плагин
<script src="../js/remodal.min.js"></script>
6 И скрипт инициализации
<script> $(document).on('opening', '.remodal', function () { console.log('opening'); }); $(document).on('opened', '.remodal', function () { console.log('opened'); }); $(document).on('closing', '.remodal', function (e) { console.log('closing' + (e.reason ? ', reason: ' + e.reason : '')); }); $(document).on('closed', '.remodal', function (e) { console.log('closed' + (e.reason ? ', reason: ' + e.reason : '')); }); $(document).on('confirmation', '.remodal', function () { console.log('confirmation'); }); $(document).on('cancellation', '.remodal', function () { console.log('cancellation'); }); // Usage: // $(function() { // // // In this case the initialization function returns the already created instance // var inst = $('[data-remodal-id=modal]').remodal(); // // inst.open(); // inst.close(); // inst.getState(); // inst.destroy(); // }); // The second way to initialize: $('[data-remodal-id=modal2]').remodal({ modifier: 'with-red-theme' }); </script>
7 В теле страницы, между тегами <body>...</body>, вставим кнопку (ссылку)
<a href="#modal">Нажми меня</a>
8 И содержимое всплывающего окна
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc"> <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button> <div> <h2 id="modal1Title">Заголовок</h2> <p id="modal1Desc"> Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative state notation and hash tracking. </p> </div> <br> <button data-remodal-action="cancel" class="remodal-cancel">Отмена</button> <button data-remodal-action="confirm" class="remodal-confirm">OK</button> </div>


Похожие решения:
Изменено: 07 12 2017
Просмотров: 3995

Комментарии

Написать