Bootstrap модальное окно (режимное) виджет
Модальные Box (режимное) накладывается на родительской форме подчиненной. Как правило, цель состоит в том, чтобы показать содержимое из одного источника, и может иметь некоторое взаимодействие, не выходя из родительской формы. Субформа может предоставить информацию, взаимодействие и так далее.
Если вы хотите обратиться к отдельным подключаемых функций, вам нужно ссылаться наmodal.js.Или, как Bootstrap плагин Обзор упоминается в главе, вы можете обратиться кbootstrap.jsили сжатой версииbootstrap.min.js.
использование
Вы можете переключить модальное окно скрытое содержание (режимное) плагин:
- Спомощью атрибутов данных: задать свойства данных-тумблер = "модальный"в элементах управления (например, кнопки или ссылки) и установитеданных целевой = "# идентификатор"илиHREF = "# Идентификатор", чтобы назначить определенный режим должен быть включен состояние коробка (с идентификатором = "идентификатор").
- По JavaScript: Используя эту технику, вы можете с помощью простой линии JavaScript для вызова окна модальный с ID = "идентификатор" из:
$ ( '# Идентификатор'). Модальные (варианты)
примеров
Статический модальный экземпляра окна, как это показано в следующих примерах:
примеров
<H2> создать модальное окно (режимное) </ h2>
<! - Кнопка для запуска модальное окно ->
<Кнопка класс = "БТН БТН-БТН первичной -lg" данных тумблер = "модальный" данных целевых = "#myModal"> Start Demo модальных кадр </ Кнопка>
<! - Режимное окно (режимное) ->
<Div класс = "модальный замирания" ID = "myModal" TabIndex = "-1" Роль = "Диалог" ария-labelledby = "myModalLabel" ария-скрыт = "истинный">
<Div класс = "модальных-диалог">
<Div класс = "модальных-контента">
<Div класс = "модальных-заголовок">
<Кнопка типа "кнопка" = класс = "закрыть" данных распускать = "модальный" ария-скрыт = "истинный"> & времена; кнопка </>
<H4 класс = "модальной название" ID = "myModalLabel"> модальное окно (режимное) Название </ h4>
</ Div>
<Div класс = "модальный тела"> добавить текст здесь </ DIV>
<Div класс = "модальных-сноска">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" данных распускать = "модальный"> Закрыть </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный" > Подтвердить изменения </ Кнопка>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal ->
</ Div>
Попробуйте »
Результаты следующие:
- модальное окно, вам нужно иметь какой-то спусковой крючок. Вы можете использовать кнопки или ссылки. Здесь мы используем кнопки.
- Если вы внимательно посмотрите на приведенный выше код, вы найдете в разделе <Button>тега, данных целевой = "# myModal " это цель , которую вы хотите загрузить на поле страницы модальной.Вы можете создать несколько модальное окно на странице, а затем создавать различные триггеры для каждого из окна модальный. Теперь, очевидно, вы не можете загрузить несколько модулей одновременно, но вы можете создать несколько загрузку в разное время на этой странице.
- Модальные окна Две вещи, чтобы отметить:
- Первый.modal, для <DIV> распознают содержимое модальное окно.
- Второйкласс .fade.Когда модальное окно переключается, то это вызовет содержимое исчезнет.
- ария-labelledby = "myModalLabel", то ссылки атрибут модальный название коробки.
- Свойствоария скрытая = "истина" для проведения модальное окно не видно , пока спусковой крючок не загорелся (например, нажав на соответствующую кнопку).
- <Div класс = "модальных-заголовка">, модальный заголовка определяется стиль головы модальный класс окна.
- класс = "закрыть", близкий класс CSS, модальное окно используется для настройки стиля кнопки Закрыть.
- данных распускать = "модальный", атрибут данных HTML5 является обычай.Там, где она используется, чтобы закрыть модальное окно.
- класс = "модальный тела", класс CSS Bootstrap CSS для стиля , заданного в качестве главного окна модальный.
- класс = "модальной сноска", класс CSS Bootstrap CSS для укладки нижней части модального окна.
- Данные-тумблер = "модальный", HTML5 пользовательских данных атрибутов данных-тумблер , чтобы открыть модальное окно.
опции
Есть несколько вариантов, которые могут быть использованы для настройки модальное окно (модальное окно) выглядеть и чувствовать себя, которые получаются с помощью атрибутов данных или JavaScript, чтобы пройти. В следующей таблице перечислены следующие параметры:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| backdrop | boolean 或 string 'static' 默认值：true | data-backdrop | 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 |
| keyboard | boolean 默认值：true | data-keyboard | 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 |
| show | boolean 默认值：true | data-show | 当初始化时显示模态框。 |
| remote | path 默认值：false | data-remote | 使用 jQuery.load方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：
<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a> |
способ
Вот некоторые полезные методы и модальный () используются вместе.
| 方法 | 描述 | 实例 |
|---|---|---|
| Options:.modal(options) | 把内容作为模态框激活。接受一个可选的选项对象。 |
$('#identifier').modal({
keyboard: false
})
|
| Toggle:.modal('toggle') | 手动切换模态框。 |
$('#identifier').modal('toggle')
|
| Show:.modal('show') | 手动打开模态框。 |
$('#identifier').modal('show')
|
| Hide:.modal('hide') | 手动隐藏模态框。 |
$('#identifier').modal('hide')
|
примеров
Следующий пример демонстрирует способ:
примеров
<! - Режимное окно (режимное) ->
<Div класс = "модальный замирания" ID = "myModal" TabIndex = "-1" Роль = "Диалог" ария-labelledby = "myModalLabel" ария-скрыт = "истинный">
<Div класс = "модальных-диалог">
<Div класс = "модальных-контента">
<Div класс = "модальных-заголовок">
<Кнопка типа "кнопка" = класс = "закрыть" данных распускать = "модальный" ария-скрыт = "истинный"> × <кнопка />
<H4 класс = "модальной название" ID = "myModalLabel"> модальное окно (режимное) Название </ h4>
</ Div>
<Div класс = "модальный тела"> Нажмите кнопку ESC для выхода. </ Div>
<Div класс = "модальных-сноска">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" данных распускать = "модальный"> Закрыть </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный" > Подтвердить изменения </ Кнопка>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal-dialog ->
</ Div>
<! - /.modal ->
<Script> $ (функция () {$ ( '# myModal') модальный ({клавиатуры :. Правда})}); </ скрипт>
Попробуйте »
Результаты следующие:
Просто нажмите клавишу ESC, модальное окно бросить курить.
событие
В следующей таблице перечислены события, чтобы использовать модальное окно. Эти события могут быть использованы, когда функция перехвата.
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.modal | 在调用 show 方法后触发。 |
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
})
|
| shown.bs.modal | 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 |
$('#identifier').on('shown.bs.modal', function () {
// 执行一些动作...
})
|
| hide.bs.modal | 当调用 hide 实例方法时触发。 |
$('#identifier').on('hide.bs.modal', function () {
// 执行一些动作...
})
|
| hidden.bs.modal | 当模态框完全对用户隐藏时触发。 |
$('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作...
})
|
примеров
Следующий пример демонстрирует использование события:
примеров
<! - Режимное окно (режимное) ->
<H2> модальное окно (режимное) подключаемого модуля события </ h2>
<! - Кнопка для запуска модальное окно ->
<Кнопка класс = "БТН БТН-БТН первичной -lg" данных тумблер = "модальный" данных целевых = "#myModal"> Start Demo модальных кадр </ Кнопка>
<! - Режимное окно (режимное) ->
<Div класс = "модальный замирания" ID = "myModal" TabIndex = "-1" Роль = "Диалог" ария-labelledby = "myModalLabel" ария-скрыт = "истинный">
<Div класс = "модальных-диалог">
<Div класс = "модальных-контента">
<Div класс = "модальных-заголовок">
<Кнопка типа "кнопка" = класс = "закрыть" данных распускать = "модальный" ария-скрыт = "истинный"> × <кнопка />
<H4 класс = "модальной название" ID = "myModalLabel"> модальное окно (режимное) Название </ h4>
</ Div>
<Div класс = "модальный тела"> Нажмите кнопку Закрыть , чтобы проверить функцию обработки события. </ Div>
<Div класс = "модальных-сноска">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" данных распускать = "модальный"> Закрыть </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный" > Подтвердить изменения </ Кнопка>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal-dialog ->
</ Div>
<! - /.modal ->
<Script> $}) (функция () {$ ( '# myModal') модальный ( 'скрыть')});. </ Script>
<Script> $ (функция () {$ ( '# myModal') на ( 'hide.bs.modal', функция () {Alert ( " Эй, я слышал , что вы , как модальный коробка ... '); })}); </ скрипт >
Попробуйте »
Результаты следующие:
Как показано в приведенном выше примере, если нажать на кнопкузакрытия,скрыть событие, отображается предупреждающее сообщение.