首頁 > 其他

bootstrap3模態框垂直居中的方法

2019-12-12 15:43:24

bootstrap的模態框,預設是設定了top為0的,就是預設是顯示在視窗的頂部的,如果你想讓模態框垂直顯示,不能直接設定,但我們可以使用js指令碼來處理。

1

這是預設情況下,模態框顯示在頂部位置的。


2

這是按鈕自動觸發彈出框的屬性,我們需要把它去掉。


3

模態框的其他html程式碼如下。


4

為按鈕新增點選事件,在事件函數里觸發模態框的顯示。


5

在顯示模態框的邏輯前,我們需要計算一下垂直居中的位置。先得到瀏覽器的視窗高度,然後減去彈出框的高度,我們這裡假設它為200。相減後除2就是位置了。


6

設定模態框的top屬性為計算出來的值。


7

再次執行頁面,現在模態框彈出的位置已經是垂直居中的了。



IT145.com E-mail:sddin#qq.com