Модальные окна начальной загрузки - плагин jQuery

1. Функции JavaScript в Bootstrap
2. Заглушка для модальных окон - modal.js
3. Пояснение к коду
4. Модальные окна Bootstrap - изменение размера
5. Управление модальными окнами с уровня jQuery
6. конфигурация
7. Удаленная настройка
8. События начальной загрузки модальных окон
9. суммирование

Недавно один из читателей этого блога задал мне вопрос о модальных окнах Bootstrap. Это побудило меня взглянуть немного в документации плагинов JQuery к начальной загрузке . Ознакомившись с этой темой, я решил, что из этого может получиться довольно интересная и полезная запись - и вот эффект :) В любом случае, удлинять нечего, так что давайте перейдем к делу!

Функции JavaScript в Bootstrap

Для начала краткое введение. В Bootstrap 3 доступно несколько расширений jQuery Bootstrap для различных вариантов взаимодействия с элементами пользовательского интерфейса. Как правило, все плагины реализованы в файле bootstrap.js (или в его «минимизированной» версии или bootstrap.min.js ), который обычно находится в структуре каталогов Bootsrap. Кроме того, вы можете скачать отдельные файлы JavaScript, содержащие код отдельных плагинов - в сегодняшнем посте я остановлюсь на плагине, который находится в файле modal.js .

Все плагины имеют API разметки HTML, то есть для базового использования нет необходимости писать одну строку кода JavaScript - вместо этого достаточно дать элементам HTML соответствующие атрибуты, доступные в упомянутом API плагина. Конечно, если возникнет такая необходимость, вы можете использовать JavaScript API и настроить функцию плагина непосредственно из JavaScript.

Полную документацию по плагинам jQuery для Bootstrap можно найти на сайте проекта ,

Заглушка для модальных окон - modal.js

Bootstrap Modal (то есть наше модальное окно Bootstrap) - это всплывающее окно JavaScript (всплывающее окно) , которое полностью настраивается и «отзывчиво». Это отличный способ легко, даже без написания кода JS, создать всплывающее окно, которое соответствует всем стандартам на веб-сайтах, созданных нами. По умолчанию это окно выглядит так:

Рисунок выше показывает, что это модальное окно имеет три раздела: заголовок, контент и кнопки. Чтобы отобразить окно, подобное приведенному выше, добавьте следующий код в HTML-код нашей страницы:

Пояснение к коду

Здесь стоит обратить внимание на несколько элементов. Во-первых, CSS-класс, данный элементу самого внешнего элемента div, является «модальным», что приводит к форматированию всплывающего окна и дает ему стиль отображения: none, что означает , что он невидим в начале. Второй проблемой является идентификатор «myModal» - он будет использоваться для назначения этого окна соответствующему триггеру (об этом чуть позже).

Один из внутренних элементов div имеет класс «modal-content». Именно внутри мы определяем содержимое модального окна . Как я уже упоминал, он разделен на три секции: заголовок находится внутри элемента с классом «modal-header», содержимое окна внутри элемента с классом «modal-body» и кнопки или нижний колонтитул в элементе, имеющем класс «modal-footer». Нижний колонтитул имеет стиль выравнивания по умолчанию : вправо, поэтому кнопки будут справа. Также обратите внимание на кнопку «Закрыть» - она ​​имеет атрибут data-dismis, который приводит к тому, что ее щелчок просто закрывает окно и отклоняет любые изменения. У того же атрибута есть кнопка, расположенная в заголовке - это кнопка «X» в правом верхнем углу экрана (для ее соответствующего форматирования и позиционирования соответствует класс «close»). Что касается кнопки «Сохранить изменения», то, конечно, ее подходящая обработка уже в наших руках, в зависимости от того, что должно делать модальное окно.

Я думаю, что теперь большинство модальных оконных элементов уже ясно. Я упоминал ранее о триггере модального окна . Это может быть простая ссылка или кнопка с соответствующими заданными атрибутами, что-то похожее на это ниже:

Здесь важен атрибут data-toggle, который сообщает Bootstrap, что данная кнопка открывает модальное окно, и атрибут data-target, указывающий, какой элемент должен быть открыт как это модальное окно.

Этого достаточно с основ, теперь пришло время для некоторых деталей о различных параметрах конфигурации нашего модального окна !

Модальные окна Bootstrap - изменение размера

Как и все в Bootstrap, модальные окна Bootstrap полностью реагируют и прекрасно адаптируются к изменяющимся размерам окна. Кроме того, мы можем контролировать их размер с помощью CSS-классов, предоставляемых Bootstrap. По умолчанию у нас есть два варианта: маленькое окно и большое окно. Мы можем управлять им, используя классы modal-sm (для небольшого окна) и modal-lg (для большого окна), которые мы даем элементу с классом modal-dialog из примера выше.

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

Управление модальными окнами с уровня jQuery

Поскольку модальные окна Bootstrap представляют собой плагин jQuery , также возможно активировать, фактически создать триггер окна, с уровня JavaScript с помощью jQuery . Как правило, такая активация ничем не отличается от других плагинов jQuery - имея модальное окно, определенное в предыдущем примере, его присоединение к механизму модального окна Bootstrap выглядит примерно так:

Итак, просто используйте селектор jQuery , чтобы получить ссылку на модальное окно, а затем вызовите модальный метод и передайте ему объект, содержащий опции.

конфигурация

Этот объект может иметь следующие свойства:

Вот как выглядит объект option, если мы хотим определить все возможные параметры. Конечно, мы можем опустить некоторые из них - тогда будут использованы параметры по умолчанию. Ниже приводится описание отдельных параметров:

• фон - имеет три возможных настройки: true (по умолчанию), false или «static» - первые два определяют, будет ли модальное окно иметь серый фон снизу или нет; третий параметр позволяет закрыть модальное окно, нажав на фон (это означает, что оно включено в данный момент)
• клавиатура - возможные значения true (по умолчанию) или false ; если установлено значение true, модальное окно также будет закрыто с помощью кнопки «Esc» на клавиатуре.
• show - также принимает логическое значение, которое означает true (по умолчанию) или false ; если эта опция включена, окно появится во время инициализации
• remote - наиболее интересная функция, позволяющая загружать контент из другого файла в элемент modal-content ; Вы можете использовать его, чтобы передать путь к файлу или установить его значение в false, если ничего не нужно загружать (это по умолчанию)

Все вышеперечисленные параметры также могут быть установлены в коде HTML с использованием соответствующих атрибутов в соответствии со схемой data- * , то есть для удаленной настройки атрибут будет иметь форму data-remote .

Удаленная настройка

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

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

«Модальный» метод также можно использовать для ручного управления отображением модального окна . Это делается следующим образом:

В первой строке мы должны переключить модальное окно, поэтому, если оно открыто в данный момент, оно будет закрыто, и наоборот. Вторая строка просто пытается показать окно, независимо от того, видно оно в данный момент или нет. Третий вариант делает что-то противоположное предыдущему, то есть он пытается скрыть окно (если оно видно, оно будет скрыто, а если нет, ничего не произойдет).

События начальной загрузки модальных окон

Bootstrap при отображении, скрытии (и т. Д.) Модальных окон вызывает несколько событий, которые мы можем обработать, используя метод on, доступный в jQuery:

Следующие события связаны с модальными окнами:

• show.bs.modal - вызывается непосредственно перед показом модального окна
• show.bs.modal - вызывается сразу после показа модального окна
• hide.bs.modal - вызывается непосредственно перед скрытием модального окна
• hidden.bs.modal - отправляется сразу после скрытия модального окна
• loaded.bs.modal - вызывается, когда удаленный контент загружается в область контента модального окна; это событие происходит, только если мы установили путь к удаленному контенту в опции «remote»

суммирование

Модальные окна Bootstrap - один из самых полезных плагинов для Bootstrap. Описание остальных можно найти на сайте проекта в разделе Компоненты JavaScript , Я призываю вас ознакомиться с ними и экспериментировать. На сегодня все, и я снова приглашаю вас! :)

Похожие

Комментарии