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