Bootsrap學習之模態視窗

2021-08-30 08:47:23 字數 1139 閱讀 6957

模態視窗在特定時間內用程式強制使用者互動。在大部分情況下,它們開啟並阻止主視窗的訪問,直到模態得以處理。

在bootstrap中,有兩種方法可以切換模態框(modal)外掛程式的隱藏內容:

$('#identifier').modal(options)
示例一:乙個靜態的模態視窗例項,如下面的例項所示:

開始演示模態框

×模態框(modal)標題

在這裡新增一些文字

關閉

提交更改

一些可與 modal() 一起使用的有用的方法:

toggle:手動切換模態框,它在模態實際顯示或隱藏之前返回處理程式

show:手動開啟模態視窗

hide:手動隱藏模態視窗

以下時模態框中要用到事件,這些事件可在函式中當鉤子使用:

show.bs.modal: 在呼叫 show 方法後觸發。

shown.bs.modal:當模態框對使用者可見時觸發(將等待 css 過渡效果完成)。

hide.bs.modal:當呼叫 hide 例項方法時觸發。

hidden.bs.modal:當模態框完全對使用者隱藏時觸發。

×			

模態框(modal)標題

在這裡新增一些文字

關閉

提交更改

模態視窗大小模態視窗有3種尺寸:小、中和大,預設為中。在modal-dialog容器上新增.modal-lg和.modal-sm類可以將尺寸分別設定為大和小。

更改模態視窗布局

在模態視窗中可以使用bootstrap網格系統調整視窗內部布局,所需要做的就是在.modal-body 中新增.container-fluid類。

示例三:

開始演示模態框

×模態框(modal)標題

這是四列的模態視窗

每個段落都在不同的列中

第三列第四列

關閉提交更改

C 模態視窗和非模態視窗

c 視窗對話方塊一般分為兩種型別 模態型別 modal 與非模態型別 modeless 所謂模態對話方塊,就是指除非採取有效的關閉手段,使用者的滑鼠焦點或者輸入游標將一直停留在其上的對話方塊。非模態對話方塊則不會強制此種特性,使用者可以在當前對話方塊以及其他視窗間進行切換下例中的form1使用模態方...

關於模態視窗

一.1.模態視窗 開啟後不可以操作父親視窗var returnvalue window.showmodaldialog url,arguments,features 2.非模態視窗 開啟後可以操作父親視窗var returnvalue window.showmodelessdialog url,ar...

非模態視窗

開發過程中想實現新執行緒建立子視窗處理子視窗的事情,父視窗仍然可以相應使用者請求的功能。利用 非模態視窗 實現 非模態對話方塊在工作列上顯示 為什麼dll遠端建立的非模式對話方塊一閃就沒了,而模式對話方塊就不會 vc中建立無模式對話方塊的問題 建立無模式對話方塊,為什麼生成的對話方塊一閃就沒了?模式...