模態對話框 bootstrap-modal.js

 

 

 

 

調用方式

通過data屬性

無需編寫JavaScript代碼即可生成一個對話框。在一個主控元素，例如按鈕，上設置data-toggle="modal"，然后再設置data-target="#foo" 或href="#foo" 用以指向某個將要被啟動的對話框。

1. <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通過JavaScript

僅用一行JavaScript代碼即可啟動id為myModal的對話框：

1. $('#myModal').modal(options)

選項

上面的選項都可以通過data屬性或JavaScript代碼傳遞給組件。對於data屬性，將選項名稱附着於data-字符串之后，就像data-backdrop=""一樣。

名稱	類型	默認值	描述
backdrop	boolean	true	Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	Closes the modal when escape key is pressed
show	boolean	true	Shows the modal when initialized.
remote	path	false	If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below: <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

方法

.modal(options)

讓你指定的內容變成一個模態對話框。接受一個可選的參數object.

1. $('#myModal').modal({
2. keyboard: false
3. })

.modal('toggle')

手動打開或隱藏一個模態對話框。

1. $('#myModal').modal('toggle')

.modal('show')

手動打開一個模態對話框。

1. $('#myModal').modal('show')

.modal('hide')

手動隱藏一個模態對話框。

1. $('#myModal').modal('hide')

事件

Bootstrap中的模態對話框對外暴露了一些事件允許你監聽。

事件	描述
show	This event fires immediately when the show instance method is called.
shown	This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide	This event is fired immediately when the hide instance method has been called.
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

1. $('#myModal').on('hidden', function () {
2. // do something…
3. })