Описание

Плагин для реализации всплывающих диалогов, сообщений и т.п. с красивыми анимациями появления на CSS3, и с минимальным количеством javascript и css кода. Идея взята из этой статьи. В отличие от оригинала, оставлены только 2D эффекты и устранено "замыливание" в webkit-бразерах.

Является основой для всплывающих диалогов $.dialog и галереи изображений $.gallery.

Требования:

jQuery 1.7+

Подключение

Для использования плагина подключите скрипт в любом месте страницы, после подключения библиотеки jQuery. Также, обязательно должны быть подключены стили из файла jquery.popup.css или jquery.popup.min.css, так как именно в них описывается позиционирование диалогов.

<link rel="stylesheet" href="path/to/script/jquery.popup.min.css" />
<script src="path/to/script/jquery.popup.min.js"></script>

Базовый пример

Всплывающий блок с видео


<style type="text/css">

  /* 
   * По умолчанию свойство overflow установлено в hidden.
   * Чтобы иметь возможность вынести .popup-close
   * за пределы блока, устанавливаем 'overflow: visible'.
   */
  #popup-video.popup {
    overflow: visible;
    background-color: #1B1B1B;
    box-shadow: 0px 1px 5px 0 rgba( 0, 0, 0, .8 );
  }

  /* 
   * Выносим .popup-close за пределы блока
   */
  #popup-video.popup .popup-close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: -30px;
    font-size: 1.5em;
    color: #fff;
  }

  /* 
   * Небольшой трюк, чтобы сделать плеер YouTube адаптивным
   */
  #popup-video.popup .embed-container { 
    position: relative; 
    z-index: 1;
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
  } 
  #popup-video.popup .embed-container iframe, 
  #popup-video.popup .embed-container object, 
  #popup-video.popup .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
  }

</style>

<script>

  $(document).ready(function(){

    // Инициализация плагина
    $('.popup').popup({
      close: function(){
        // Удаление плеера при закрытии
        $(this).find('.embed-container').empty();
      }
    });

    // Обработка кликов по превью
    $(document).on('click', '[data-action="watch-video"]', function(e){

      e.preventDefault();

      // Получение доступа к API плагина
      var plugin = $('#popup-video.popup').data('popup');

      // Создание плеера через <iframe /> 
      $('#popup-video.popup .embed-container').html(
        '<iframe src="'
        + e.currentTarget.href
        + '?autoplay=1" frameborder="0" allowfullscreen />'
      );

      // Открытие всплывающего блока
      plugin.open();
    });

  });

</script>

<!-- Статичное превью -->
<a href="https://www.youtube.com/embed/e9al_k8e93I" data-action="watch-video">
  <img src="images/farcry4.jpg" />
</a>

<!-- Всплывающий блок -->
<div class="popup effect-fade-scale" id="popup-video">
  <div class="embed-container"></div>
  <!-- 
  Любой элемент с классом .popup-close внутри диалога
  будет вызывать его закрытие по клику.
  //-->
  <a href="#" class="popup-close">
    <i class="glyphicon glyphicon-remove"></i>
  </a>
</div>

Параметры инициализации

Boolean modal = false

Модальный режим, в котором клик по подложке блока не закрывает его.

Boolean bubble = true

"Всплывание" блока вверх по дереву документа. При инициализации с этим параметром, установленным в true, блок будет перемещен в конец <body>, не зависимо от того, где он был изначально.

Function open = Null

Функция, вызываемая перед отображением всплывающего блока.

Function close = Null

Функция, вызываемая перед скрытием всплывающего блока.

Function realign = Null

Функция, вызываемая перед установкой свойств margin-left и margin-top при позиционировании блока.

API

При инициализации плагина, объект $.popup сохраняется в .data('popup') у каждого из блоков, попавшего в исходный набор. Этот объект предоставляет управление копией плагина и имеет следующий набор свойств методов:

Свойства

jQuery $popup

Всплывающий блок

jQuery $overlay

Подложка всплывающего блока

Методы

$.popup config([Object params])

Расширяет набор параметров инициализации, добавляя из объекта Object params новые параметры и перезаписывая уже существующие.

$.popup open()

Показывает всплывающий блок и его подложку.

$.popup overlay()

Показывает только подложку. После вызова этого метода, сам блок по прежнему может быть отображен с помощью метода open()

$.popup close([Number delay])

Скрывает всплывающий блок. Если числовой параметр delay передан и больше 0, закрытие будет отсрочено на переданное количество микросекунд.

$.popup realign()

Позиционирует блок так же, как при показе или изменении размеров окна. Полезен при динамическом наполнении блока.

jQuery destroy()

Уничтожает копию плагина, возвращая исходный блок.