Создание модальных окон в javascript

Модальные окна — этот термин пришел из десктопных приложений. Класс модального окна отсутствует в чистом javascript, но развитие веб-приложений требует наличия такого компонента для разработки интерфейса пользователя.

В pureJS есть такая функция как confirm(), позволяющая получить от пользователя бинарный выбор (да/нет). Но ни оформить шаблон, ни улучшить эту функцию нельзя.

Модальные окна в фреймворках

Если вы используйте какой либо фронтенд фреймворк, то обязательно найдете в коллекции компонент, позволяющий создавать модальные окна. К примеру в angular, вы найдете сервис mdDialog (компонент Angular Material) и соответствующие директивы для шаблона.

Скрипты bootstrap позволяют вам открывать и программировать модальные окна.

Для jQuery создано множество плагинов, которые могут выполнять роль модальных окон, к примеру, fancyBox и shadowbox. Первичная их задача была в демонстрации изображений (показ галереи или полной версии изображения по клику на превью), но позднее функционал был значительно расширен.

Скрипт модального окна в чистом javascript.

Хочу рассказать о скрипте tingle. Я нашел его, когда подбирал реализацию модального окна для своего Drupal плагина MAT.

У этого крошечного скрипта много положительных качеств, два из которых, мне были очень важны : он небольшой (CSS + JS  < 10k) и не имеет зависимостей.

Вот некоторые примеры работы скрипта:

Простое окно с выводом произвольного содержимого. Нет кнопок, только «крестик» для закрытия.

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

В этом примере, модальное окно не содержит базовой кнопки «закрыть» в виде крестика справа-сверху. Пользователь должен выбрать действие, нажав на одну из акшн-кнопок.


Если содержимое не влазит по вертикали — не беда, появляется линейка прокрутки.

Вариаций очень много, но меня интересовал вариант со вставкой модального окна не inline html, а когда данные подгружаются откуда то ещё. Скрипт tingle не имеет каких то других вариантов, кроме inline загрузки контента.

Но я решил задачу, используя iframe.

Понятно, что можно воспользоваться и ajax. Решение данного вопроса остается за рамками tingle, вы сами выбираете наиболее уместный в вашей ситуации способ.

Написать комментарий

Мало букафф? Читайте есчо !

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Fancybox прокручивает основное окно к верху

Июль 13, 2016 г.

Сталкивался с таким поведением плагина fancybox. При открытии модального окна, происходит прокрутка в основном окне к самому верху. Как с этим бороться? Это происходит не всегда, а при некоторых случаях верстки. Верстку уже менять проблематично, ...

Читать

 

Комментарии к «Создание модальных окон в javascript»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: