Простое модальное окно или поп ап (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>


Похожие решения:
Изменено: 14 03 2020
Просмотров: 5410

Написать комментарий (без авторизации)

Написать