Bootstrap okno modalne (modal) widget

Poprzedni: Bootstrap przejścia (Transition) widget

Dalej: Bootstrap rozwijanego menu (rozwijane) widget

Modal Box (modalna) jest nałożona na podformularzu formularza nadrzędnego. Ogólnie, celem jest pokazanie treści z jednego źródła i może mieć pewne oddziaływanie bez wychodzenia z formularza nadrzędnego. Podformularz może dostarczyć informacji, interakcji i tak dalej.

Jeśli chcesz zapoznać się z poszczególnymi funkcjami typu plug-in, trzeba odwołaćmodal.js.Albo, jak Bootstrap Przegląd wtyczki rozdziale wspomniano, można zwrócić się dobootstrap.jslub skompresowanej wersjibootstrap.min.js.

zwyczaj

Można przełączyć okno modalne ukrytą zawartość (modalna) plug-in:

Poprzez dane atrybuty: ustawić właściwości danych-przełączania = "modal"w elementach sterowania (takie jak przyciski lub linki) i ustawdanych target = "identyfikator #"lubhref = "identyfikator #",aby przypisać określony tryb, aby przełączyć okno stanu (z id = "identyfikator").
Przez JavaScript: Stosując tę technikę, można za pomocą prostej linii JavaScript, aby wywołać okno modalne z id = "identyfikator" w:
```
$ ( '# Identifier "). Modalne (opcje)
```

Przykłady

Statyczny modalne okienko przykład, jak to przedstawiono w następujących przykładach:

Przykłady

<H2> stworzyć okno modalne (modal) </ h2> <! - Przycisk, aby wywołać okno modalne -> <Przycisk class = "btn btn-podstawowej BTN -LG" Dane-przełączania = "modalne" Dane-target = "#myModal"> Start Demo modalne ramki </ button> <! - Okno modalne (modal) -> <div class = "modal blaknięcie" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria ukryte = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <Przycisk type = "link" class = "close" danych oddalenie = "modalne" aria ukryte = "true"> & razy; </ button> <H4 class = "modal-title" id = "myModalLabel"> okno modalne (modal) tytuł </ h4> </ Div> <div class = "modal-ciało"> dodać tekst </ div> <div class = "modal-footer"> <Przycisk type = "link" class = "btn btn-default" danych oddalenie = "modal"> Zamknij </ button> <Przycisk type = "link" class = "btn btn-primary" > Wyślij zmiany </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal -> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Kod wyjaśnienie:

okno modalne, trzeba mieć jakiś wyzwalacz. Można użyć przycisków lub linki. Tutaj używamy przycisku.
Jeśli przyjrzeć się bliżej powyższym kodzie, znajdziesz w sekcji <button>znacznika danych target = "# myModal " jest celem, który chcesz załadować na polu Strona modalnej.Można utworzyć wiele okno modalne na stronie, a następnie tworzyć różne wyzwalacze dla każdego okna modalnego. Teraz, oczywiście, nie można załadować wiele modułów w tym samym czasie, ale można tworzyć wielokrotne ładowanie w różnym czasie na stronie.
Modal pole Dwie rzeczy do uwaga:
1. Pierwszym z nich jest.modal, bo <div> rozpoznaje zawartość okna modalnego.
2. Drugim jest.fade klasy.Gdy okno modalne jest włączony, spowoduje to zawartość zanikać.
aria-labelledby = "myModalLabel", odniesienia atrybutów title modalne okno.
aria ukryte property = "true"do trzymania modalne okno nie jest widoczny, dopóki spust jest rozgrzana (takie jak kliknięcie na odpowiedni przycisk).
<Div class = "modal-header">, modal-header jest zdefiniowany styl głowy klasy modalne okno.
class = "close", w pobliżu jest klasą CSS, modalne okno służy do ustawiania stylu przycisk Zamknij.
danych oddalenie = "modal", atrybut danych HTML5 jest zwyczaj.Gdzie jest on stosowany, aby zamknąć okno modalne.
class = "modal-ciało", to klasa CSS Bootstrap CSS dla stylu ustawionego jako głównego okna modalnego.
class = "modal-footer", to klasa CSS Bootstrap CSS dla stylizacji dno modalnego okna.
Dane-przełączania = "modal" HTML5 danych niestandardowych atrybutów danych-przełącznika, aby otworzyć okno modalne.

Opcje

Istnieje kilka opcji, które mogą być wykorzystane w celu dostosowania modalne okno (okno modalne) wygląd, które są uzyskiwane przez atrybuty danych lub JavaScript do przejścia. Poniższa tabela zawiera następujące opcje:

选项名称	类型/默认值	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>

sposób

Oto kilka przydatnych metod i modalna () stosowane razem.

方法	描述	实例
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')

Przykłady

Poniższy przykład demonstruje sposób:

Przykłady

<! - Okno modalne (modal) -> <div class = "modal blaknięcie" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria ukryte = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <Przycisk type = "link" class = "close" danych oddalenie = "modalne" aria ukryte = "true"> x </ button> <H4 class = "modal-title" id = "myModalLabel"> okno modalne (modal) tytuł </ h4> </ Div> <div class = "modal-body"> Naciśnij przycisk ESC, aby wyjść. </ Div> <div class = "modal-footer"> <Przycisk type = "link" class = "btn btn-default" danych oddalenie = "modal"> Zamknij </ button> <Przycisk type = "link" class = "btn btn-primary" > Wyślij zmiany </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal-dialog -> </ Div> <! - /.modal -> <Script> $ (function () {$ ( '# myModal') modalna ({klawiatury :. true})}); </ script>

Spróbuj »

Wyniki przedstawiają się następująco:

Wystarczy kliknąć klawisz ESC, modalne okno jest zamknięty.

wydarzenie

Poniższa tabela zawiera listę zdarzeń, aby użyć okna modalnego. Zdarzenia te mogą być wykorzystywane, gdy funkcja haka.

事件	描述	实例
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 () { // 执行一些动作... })

Przykłady

Poniższy przykład demonstruje użycie tego wydarzenia:

Przykłady

<! - Okno modalne (modal) -> <H2> okno modalne (modal) Plug-in Event </ h2> <! - Przycisk, aby wywołać okno modalne -> <Przycisk class = "btn btn-podstawowej BTN -LG" Dane-przełączania = "modalne" Dane-target = "#myModal"> Start Demo modalne ramki </ button> <! - Okno modalne (modal) -> <div class = "modal blaknięcie" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria ukryte = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <Przycisk type = "link" class = "close" danych oddalenie = "modalne" aria ukryte = "true"> x </ button> <H4 class = "modal-title" id = "myModalLabel"> okno modalne (modal) tytuł </ h4> </ Div> <div class = "modal-body"> Kliknij przycisk Zamknij, aby sprawdzić działanie zdarzeń. </ Div> <div class = "modal-footer"> <Przycisk type = "link" class = "btn btn-default" danych oddalenie = "modal"> Zamknij </ button> <Przycisk type = "link" class = "btn btn-primary" > Wyślij zmiany </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal-dialog -> </ Div> <! - /.modal -> <Script> $}) (function () {$ ( '# myModal') modalnego ( 'hide')});. </ Script> <Script> $ (function () {$ ( '# myModal ") w (" hide.bs.modal', function () {alert ( " Hej, słyszałem, że lubisz oknie modalnym ..."); })}); </ script >

Spróbuj »

Wyniki przedstawiają się następująco: