Bootstrap modale Box (Modal) Widget
Modal Box (Modal) auf das übergeordnete Formular Formulars überlagert. Im Allgemeinen ist der Zweck Inhalt aus einer Hand zu zeigen, und eine gewisse Interaktion, ohne den Eltern Form haben kann. Subform kann Information, Interaktion und so weiter geben.
Wenn Sie auf die einzelnen Plug-in - Funktionen beziehen möchten, müssen Siemodal.js zu verweisen.Oder, wie Bootstrap - Plugin Übersicht Kapitel erwähnt, können Sie aufbootstrap.jsoder komprimierte Version vonbootstrap.min.js beziehen.
Verwendung
Sie können die modale Box versteckt wechseln (Modal) Plug-in:
- Durch die Datenattribute:legen Sie die Eigenschaften derDaten-Toggle = "modal"in den Controller - Elemente (wie Schaltflächen oder Links) auf und stellenDaten-target = "# Kennung"oderhref = "# Bezeichner"einen bestimmten Modus zuweisen zu schalten Zustand Box (mit id = "identifier").
- Durch JavaScript: Mit dieser Technik, können Sie durch eine einfache JavaScript - Zeile kann das modale Feld mit id = "Bezeichner" von zu nennen:
$ ( '# Identifier'). Modal (Optionen)
Beispiele
Eine statische modales Fenster beispielsweise wie in den folgenden Beispielen gezeigt:
Beispiele
<H2> create modale Box (Modal) </ h2>
<! - Taste , um das modale Feld auszulösen ->
<Taste class = "btn btn-primären BTN -lg" Daten-Toggle = "modal" Daten-target = "#myModal"> Demo starten modalen Rahmen </ button>
<! - Modal Box (Modal) ->
<Div class = "modal fade" id = "myModal" tabindex = "-1" role = "Dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
<Div class = "Modal-Dialog">
<Div class = "modal-content">
<Div class = "modal-header">
<Taste type = "button" class = "close" Daten entlassen = "modal" aria-hidden = "true"> & Zeiten; </ button>
<H4 class = "modal-title" id = "myModalLabel"> modale Box (Modal) Titel </ h4>
</ Div>
<Div class = "modal-body"> fügen Sie etwas Text hier </ div>
<Div class = "modal-footer">
<Taste type = "button" class = "btn btn-default" Daten entlassen = "modal"> Schließen </ button>
<Taste type = "button" class = "BTN BTN-primary" > Submit Changes </ button>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal ->
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
- Modal Fenster, müssen Sie irgendeine Art von Trigger zu haben. Sie können die Tasten oder Links verwenden. Hier verwenden wir einen Knopf.
- Wenn Sie genau auf den obigen Code anschauen, werden Sie in der <button>-Tag, daten target = "# myModal finden " ist das Ziel , das Sie auf einer Seite modale Box geladen werden soll.Sie können mehrere modale Box auf der Seite erstellen und dann verschiedene Auslöser für jede der modale Box erstellen. Nun, natürlich können Sie nicht mehrere Module gleichzeitig zu laden, aber Sie können mehrere Laden zu verschiedenen Zeiten auf der Seite erstellen.
- Modal Box Zwei Dinge zu beachten:
- Die erste ist.modal, für den <div> Inhalt modale Feld erkennen.
- Die zweite ist.fade Klasse.Wenn die modale Feld eingeschaltet wird, wird er bewirken, dass die Inhalte verblassen.
- aria-labelledby = "myModalLabel", das Attribut - Referenzen modale Feld Titel.
- PropertyArie versteckt = "true" für eine modale Fenster hält , ist nicht sichtbar , bis der Trigger ausgelöst wird , nach oben (wie auf die entsprechende Schaltfläche klicken).
- <Div class = "modal-header">, Modal-Header definiert ist modal Fensterklasse Kopf-Stil.
- class = "close", in der Näheist eine CSS - Klasse, wird modalen Fenster verwendet , um den Stil des Schließen - Taste.
- Daten entlassen = "modal", HTML5 Datenattribut ist ein Brauch.Wo wird es verwendet, um das modale Fenster zu schließen.
- class = "modal-Körper", ist eine CSS - Klasse Bootstrap CSS für den Stil als Haupt modalen Fenster eingestellt.
- class = "modal-footer", ist eine CSS - Klasse Bootstrap CSS für den Boden des modalen Fenster Styling.
- Daten-Toggle = "modal", HTML5 benutzerdefinierte Datenattributdaten-Taste , um das modale Fenster zu öffnen.
Optionen
Es gibt einige Optionen, die verwendet werden können, das modale Fenster (Modal Fenster) aussehen und sich anfühlen, anpassen, die durch Datenattribute oder JavaScript erhalten werden passieren. Die folgende Tabelle enthält die folgenden Optionen:
| 选项名称 | 类型/默认值 | 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> |
Weg
Hier sind einige nützliche Methoden und Modal () verwendet, zusammen.
| 方法 | 描述 | 实例 |
|---|---|---|
| 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')
|
Beispiele
Das folgende Beispiel veranschaulicht das Verfahren:
Beispiele
<! - Modal Box (Modal) ->
<Div class = "modal fade" id = "myModal" tabindex = "-1" role = "Dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
<Div class = "Modal-Dialog">
<Div class = "modal-content">
<Div class = "modal-header">
<Taste type = "button" class = "close" Daten entlassen = "modal" aria-hidden = "true"> × </ button>
<H4 class = "modal-title" id = "myModalLabel"> modale Box (Modal) Titel </ h4>
</ Div>
<Div class = "modal-body"> Drücken Sie die ESC - Taste , um zu beenden. </ Div>
<Div class = "modal-footer">
<Taste type = "button" class = "btn btn-default" Daten entlassen = "modal"> Schließen </ button>
<Taste type = "button" class = "BTN BTN-primary" > Submit Changes </ button>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal-dialog ->
</ Div>
<! - /.modal ->
<Script> $ (function () {$ ( '# myModal') modal ({Tastatur :. True})}); </ script>
Versuchen »
Die Ergebnisse sind wie folgt:
Nur ESC-Taste klicken, wird modalen Fenster verlassen.
Ereignis
In der folgenden Tabelle ist das Ereignis das modale Feld zu verwenden. Diese Ereignisse können, wenn die Hook-Funktion verwendet werden.
| 事件 | 描述 | 实例 |
|---|---|---|
| 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 () {
// 执行一些动作...
})
|
Beispiele
Das folgende Beispiel demonstriert die Verwendung des Ereignisses:
Beispiele
<! - Modal Box (Modal) ->
<H2> modale Box (Modal) Plug-in - Ereignis </ h2>
<! - Taste , um das modale Feld auszulösen ->
<Taste class = "btn btn-primären BTN -lg" Daten-Toggle = "modal" Daten-target = "#myModal"> Demo starten modalen Rahmen </ button>
<! - Modal Box (Modal) ->
<Div class = "modal fade" id = "myModal" tabindex = "-1" role = "Dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
<Div class = "Modal-Dialog">
<Div class = "modal-content">
<Div class = "modal-header">
<Taste type = "button" class = "close" Daten entlassen = "modal" aria-hidden = "true"> × </ button>
<H4 class = "modal-title" id = "myModalLabel"> modale Box (Modal) Titel </ h4>
</ Div>
<Div class = "modal-body"> Klicken Sie auf die Schaltfläche Schließen die Event - Funktion zu überprüfen. </ Div>
<Div class = "modal-footer">
<Taste type = "button" class = "btn btn-default" Daten entlassen = "modal"> Schließen </ button>
<Taste type = "button" class = "BTN BTN-primary" > Submit Changes </ button>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal-dialog ->
</ Div>
<! - /.modal ->
<Script> $}) (function () {$ ( '# myModal') modal ( "verstecken")});. </ Script>
<Script> $ (function () {$ ( '# myModal') auf ( 'hide.bs.modal', function () {alert ( ' Hey, ich hörte , dass Sie wie Modal Box ...'); })}); </ script >
Versuchen »
Die Ergebnisse sind wie folgt:
Wie im obigen Beispiel gezeigt, wenn Sie auf dieSchließen- Schaltfläche klicken,versteckenEreignis, wird eine Warnmeldung angezeigt.