Bootstrap模態框簡單使用

專案中遇到，記錄一下。

引入bootstrap的js和css就可以，官網有就不寫了

html

="modal fade" id=
"my_modal" tabindex=
"-1"role=
"dialog" aria-labelledby=
"mymodallabel1" aria-hidden=
"true"
>
="modal-dialog"
>
="modal-content"
>
="modal-header"
>
"button"
class
="close" data-dismiss=
"modal"
aria-hidden=
"true"
>
×<
/button>
="modal-title"
>標題<
/h4>
<
/div>
="modal-body"
>
="form-horizontal"
>
="box-body"
>
//需要顯示的東西寫在這裡面
<
/div>
<
/form>
<
/div>
="modal-footer"
>
"button"
class
="btn btn-default"  data-dismiss=
"modal"
>關閉<
/button>
"button"
class
="btn btn-primary"
/button>
<
/div>
<
/div>
<
/div>
<
/div>

開啟模態框

$
("#my_modal").
modal()
;$("#my_modal").
modal
('show');
//這兩種方法都可以

隱藏模態框

$
("#my_modal").
modal
('hide'
);

在呼叫 show 方法後觸發。

$
('#my_modal').
on('show.bs.modal'
,function()
)

在呼叫 hide 方法時觸發。

$
('#my_modal').
on('hide.bs.modal'
,function()
)

在呼叫 hide 方法後觸發。(完全隱藏後) 上面方法和這個差不多只是順序區別

$
('#my_modal').
on('hidden.bs.modal'
,function()
)

在第二層模態框隱藏時加上如下js**：

$
('#第二層模態框id').
on('hidden.bs.modal'
,function()
);

注意其中用 = 號就是把父頁面的body的class替換掉了，因為用 += 追加的話如果不重新整理整體頁面就會導致body的class中有很多modal-open，從而導致沒有效果。

Bootstrap模態框Modal外掛程式

前提是要引入bootstrap.min.js modal 是覆蓋在父窗體上的子窗體。通常，目的是顯示來自乙個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊互動等。1.先定義乙個按鈕 data toggle 以什麼事件觸發，如modal,popover,tooltips等 d...

Bootstrap模態框使用詳解

一.模態框的正常點選出現，如新增功能新增二.還有一種就是編輯，此時在彈出模態框時，裡面要寫入資料，所以要先取得資料再彈出模態框。這時要加入js 控制 1.jsp頁面修改2.js 修改使用者將使用者資訊寫入模態框 function updatesystemuser else dialog.mo...

基於bootstrap 模態框的警告框

基於bootstrap 模態框的警告框 1，匯入bootstrap 外掛程式，2，jsp中的警告框 class modal fade id myalert style z index 2000 class modal backdrop in style z index 1900 div class ...

Bootstrap模態框簡單使用

Bootstrap模態框Modal外掛程式

Bootstrap模態框使用詳解

基於bootstrap 模態框的警告框

相關推薦