Решение, как сделать простое всплывающее окно при помощи плагина Remodal на jQuery
При нажатии на кнопку или ссылку, должно появится всплывающее окно с любым типом контента внутри (текст, фото, видео, веб-форма), при этом остальная часть экрана затемняется.
Демонстрация
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>