Модальное окно bootstrap через javascript

Компоненты

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

Модальное окно

Модальные окна Имеют обтекаемую форму, но гибкая, диалоговое окно с минимальным набором функций и по умолчанию.

autofocus атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

$('#myModal').on('shown.bs.modal', function ()  $('#myInput').focus() >)

Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Размещение разметки модального окна

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

Предостережения для мобильных устройств

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

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

Modal title

 class="modal fade">  class="modal-dialog" role="document">  class="modal-content">  class="modal-header">  type="button" class="close" data-dismiss="modal" aria-label="Close">  aria-hidden="true">×    class="modal-title">Modal title   class="modal-body"> One fine body…    class="modal-footer">  type="button" class="btn btn-secondary" data-dismiss="modal">Close  type="button" class="btn btn-primary">Save changes    

Демо

Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.

Название модального окна

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

Подсказки в модальном окне

Эта ссылка и эта ссылка должна иметь подсказку при наведении.

Переполняя текст для отображения прокрутки;

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

  type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  class="modal-dialog" role="document">  class="modal-content">  class="modal-header">  type="button" class="close" data-dismiss="modal" aria-label="Close">  aria-hidden="true">×    class="modal-title" id="myModalLabel">Modal title   class="modal-body"> .  class="modal-footer">  type="button" class="btn btn-secondary" data-dismiss="modal">Close  type="button" class="btn btn-primary">Save changes    

Сделать модальности можно

Не забудьте добавить role=»dialog» и aria-labelledby=». » , ссылаясь на модальное окно Заголовок, чтобы .modal , и role=»document» к .modal-dialog сам.

Кроме того, вы можете дать описание вашего модальное окно диалог с aria-describedby на .modal .

Встраивание видео YouTube

Встраивание видео YouTube в модальности требует дополнительных JavaScript не в Bootstrap чтобы автоматически остановить воспроизведение и многое другое. Ознакомиться с этой полезной переполнение стека пост для получения дополнительной информации.

Опционные размеры

Модальные окна Имеют два дополнительных размера, доступные через классы модификатор, который будет размещен на .modal-dialog . Эти размеры ударом в некоторые точки останова, чтобы избежать горизонтальной полосы прокрутки на узких окнах.

  class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal  class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">  class="modal-dialog modal-lg">  class="modal-content"> .    type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal  class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">  class="modal-dialog modal-sm">  class="modal-content"> .  

Large modal

Small modal

Удалить анимацию

Для модальности, которые просто появляются, а не исчезают, просмотреть, удалить .fade класс от модальное окно разметки.

 class="modal" tabindex="-1" role="dialog" aria-labelledby=". " aria-hidden="true"> . 

С помощью блочной системы

Чтобы воспользоваться преимуществами Bootstrap блочная система в модальное окно, просто гнездо .container-fluid В .modal-body , а затем использовать обычные блочная система классов внутри этого контейнера.

Modal title

 id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">  class="modal-dialog" role="document">  class="modal-content">  class="modal-header">  type="button" class="close" data-dismiss="modal" aria-label="Close"> aria-hidden="true">×   class="modal-title" id="gridModalLabel">Modal title   class="modal-body">  class="container-fluid bd-example-row">  class="row">  class="col-md-4">.col-md-4  class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4   class="row">  class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3  class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4   class="row">  class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3   class="row">  class="col-sm-9"> Level 1: .col-sm-9  class="row">  class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6  class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6       class="modal-footer">  type="button" class="btn btn-default" data-dismiss="modal">Close  type="button" class="btn btn-primary">Save changes      class="bd-example bd-example-padded-bottom">  type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal"> Launch demo modal 

Изменения модальное окно Контента, основанного на кнопку пуска

Есть куча кнопок, вызывает модальное окно, просто с немного разным содержанием? Используйте event.relatedTarget и HTML data-* атрибуты (возможно через jQuery) варьировать содержимым модального окна в зависимости от того, какая кнопка была нажата. См подробные сведения в документации Модальных событий relatedTarget .

New message

 class="bd-example">  type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo  type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat  type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap  class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  class="modal-dialog" role="document">  class="modal-content">  class="modal-header">  type="button" class="close" data-dismiss="modal" aria-label="Close">  aria-hidden="true">×    class="modal-title" id="exampleModalLabel">New message   class="modal-body">  class="form-group">  for="recipient-name" class="form-control-label">Recipient:  type="text" class="form-control" id="recipient-name">   class="form-group">  for="message-text" class="form-control-label">Message:  class="form-control" id="message-text">     class="modal-footer">  type="button" class="btn btn-secondary" data-dismiss="modal">Close  type="button" class="btn btn-primary">Send message     

$('#exampleModal').on('show.bs.modal', function (event)  var button = $(event.relatedTarget) // Кнопка, что спровоцировало модальное окно var recipient = button.data('whatever') // Извлечение информации из данных-* атрибутов // Если необходимо, вы могли бы начать здесь AJAX-запрос (и выполните обновление в обратного вызова). // Обновление модальное окно Контента. Мы будем использовать jQuery здесь, но вместо него можно использовать привязки данных библиотеки или других методов. var modal = $(this) modal.find('.modal-title').text('New message to ' + recipient) modal.find('.modal-body input').val(recipient) >)

Модальные окна с динамической высоты

Если Высота модальное окно изменения во время ее открытия, Вам необходимо позвонить $(‘#myModal’).data(‘bs.modal’).handleUpdate() подрегулировать модальное окно’s позиции в случае появляется полоса прокрутки.

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

В модальное окно плагин переключает ваш скрытый Контент по требованию, через атрибуты данных или JavaScript. Он также добавляет .modal-open на по умолчанию прокрутка поведение и создает .modal-backdrop , чтобы обеспечить щелкните область для увольнения показаны модальные глаголы при нажатии вне модальное окно.

С помощью данных атрибутов

Активируйте модальное окно без записи JavaScript. Набор data-toggle=»modal» на элемент контроллера, кнопки, вместе с data-target=»#foo» или href=»#foo» , чтобы предназначаться для определенного модальное окно для переключения.

 type="button" data-toggle="modal" data-target="#myModal">Launch modal 

Через JavaScript

Вызов модальное окно с кодом myModal С одной строки JavaScript:

Варианты

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data- , а на data-backdrop=»» .

Имя	Тип	По умолчанию	Описание
backdrop	boolean or the string ‘static’	true	Включает в себя модальное окно-фон элемента. Кроме того, укажите static на фоне которого не закрыть модальное окно по щелчку.
keyboard	boolean	true	Замыкает модальное окно При нажатии клавиши Escape
show	boolean	true	Показывает модальное окно При инициализации.

Методы

.modal(options)

Активирует ваш Контент в модальное окно. Принимает необязательный варианты object .

$('#myModal').modal( keyboard: false >)

.modal(‘toggle’)

Переключение вручную на модальное окно. Возвращает абоненту до модальное окно фактически было показано или скрыто (т. е. shown.bs.modal или hidden.bs.modal события).

.modal(‘show’)

Вручную открывает модальное окно. Возвращает абоненту до модальное окно фактически было показано (т. е. shown.bs.modal события).

.modal(‘hide’)

Вручную скрывает модальное окно. Возвращает абоненту до модальное окно На самом деле был скрытым (т. е. hidden.bs.modal события).

События

Bootstrap модальное окно класс предоставляет несколько событий для навески модальное окно функциональности. Все модальное окно события обстреляли модальное окно сама по себе (т. е. ).

Тип События	Описание
show.bs.modal	Это событие возникает сразу же, когда show способ экземпляра называется. Если вызываемое щелчком, щелчке элемент, как relatedTarget свойство события.
shown.bs.modal	Это событие запускается, когда модальное окно стала видимой для пользователя (будет ждать CSS переходы для завершения). Если вызываемое щелчком, щелчке элемент как relatedTarget свойство события.
hide.bs.modal	Это событие сразу же выполняется, когда вызывается экземпляр метода hide .
hidden.bs.modal	Это событие запускается, когда модальное окно закончил быть скрыта от пользователя (будет ждать CSS переходы для завершения).

$('#myModal').on('hidden.bs.modal', function (e)  // сделать что-то. >)

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.

Источник