Создание модальных окон в 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, вы сами выбираете наиболее уместный в вашей ситуации способ.

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

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

Перебор атрибутов HTML элемента в javascript

Февраль 17, 2016 г.

За использованием библиотеки jQuery как то забываешь о базовых свойствах и методах DOM  в javascript. Как получить весь набор аттрибутов HTML элемента? Получим ссылку на элемент HTML документа каким либо образом: [crayon-59529437e51bd662968098/] ...

Читать

Сообщение Cannot read property 'msie' of undefined

Апрель 13, 2017 г.

Два вероятных случая могут генерировать данное сообщение в консоли браузера. Раннее обращение к js плагину Те или иные свойства могут быть недоступны, если вы обращаетесь к методам и свойствам до того как они определены. В данном случае обращение ...

Читать

 

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

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



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