umodal

Лёгкая jQuery Модалочка

Всё началось с того, что на рабочем проекте понадобилось простенькое модальное окно. «fancyBox» мега-универсальный, очень многофункциональный, но слишком большой и на то время ещё имевший несколько багов при работе на iOS, нужно было простейшее решение. Написал, столкнулся с тем же рядом проблем, включая адаптацию и корректную поддержку iOS, углубился в изучение всех нюансов, придумал практичные фиксы, поэкспериментировал, потестил и в итоге получилась "Лёгкая jQuery Модалочка" с названием «umodal». Если будет спрос - буду поддерживать и развивать, пока просто оставлю её здесь, вдруг тебе пригодится.

Что она делает?

  1. Открывает скрытый на странице блок по ID откроем?
  2. Если ссылка на изображение, то открывает его посмотрим?
  3. Загружает с помощью AJAX содержимое другой страницы загрузим?
  4. Также загружает контент из указанного блока другой страницы проверим?

Внедрение

Всё как всегда:

  • Скачиваем модалочку: umodal.zip
  • Подключаем jQuery
  • Подключаем стили «umodal»
  • Подключаем скрипт «umodal»
          <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="umodal.min.css">
<script src="umodal.min.js"></script>
        

Использование

Для работы с «umodal» необходимо добавить элементу класс umodal__open. Это может быть любой элемент: ссылка, кнопка, изображение, текстовый блок и т.д. Если это ссылка, то значение атрибута href игнорируется, если это не изображение.

Модальное окно из скрытого на странице содержимого

Создаём ссылку со специальным атрибутом umodal-id, который свяжет её с блоком для модального окна:

        <a href="link" umodal-id="umodal-2" class="umodal__open">Модальное окно</a>
      

В любом месте страницы создаём блок с таким же атрибутом и значением, он будет содержимым модального окна:

        <div umodal-id="umodal-2">
  <h2>Содержимое модального окна</h2>
  <p>Для закрытия модального окна можно также использовать клавишу <b>Esc</b></p>
</div>
      

Результат:

Модальное окно с изображением

Для открытия изображения в модальном окне нужно лишь указать на него ссылку:

        <a href="/img/demo.jpeg" class="umodal__open">Модальное окно c изображением</a>
      

Результат:

Модальное окно с содержимым из другой страницы

Чтобы загрузить в модальное окно содержимое другой страницы, необходимо указать её адрес в атрибуте umodal-src. Из страницы автоматически отфильтруется всё лишнее и будет загружено только то содержимое, которое находится между тегами <body>.

Создаём ссылку со специальным атрибутом umodal-src:

        <a href="another.html" umodal-src="another.html" class="umodal__open">Модальное окно AJAX</a>
      

Результат:

Модальное окно с содержимым из указанного блока другой страницы

Также можно загрузить содержимое из определённого блока другой страницы, для этого есть специальный атрибут umodal-content, в значении которого нужно указать соответствующий блок:


Создаём ссылку со специальными атрибутами umodal-src и umodal-content:

        <a href="test" umodal-src="another.html" umodal-content=".content" class="umodal__open">Модальное окно AJAX</a>
      

Результат:

Дополнительно

Пока предусмотрено две цветовых 'темы' модуля:

  1. Светлая (стандартная)
  2. Тёмная: применяется при загрузке изображений

Смена темы модального окна будет реализована позже, в дальнейшем применение темы по умолчанию будет указываться параметром через JS.

Скачать

umodal.zip

Примеры

Контактная форма

Кнопка закрытия

Cкрытый на странице блок

Неважно, есть ли атрибут href и какое его значение - ссылка не будет открыта.
Но при этом ссылку всегда можно открыть в новом окне.

Закрыть модальное окно можно также с помощью клавиши Esc.

Содержимое модального окна

Для закрытия модального окна можно также использовать клавишу Esc

Контактная форма

Если требуется закрыть модальное окно при нажатии на какой-либо элемент, то необходимо добавить ему класс umodal__shut.