首頁 > 網際網路

jquery Dialog 彈出框居中怎麼設定

2019-12-11 16:10:04

jquery是一個前端的指令碼庫,也有很多好用的外掛,比如Dialog彈出框外掛,使用Dialog彈出框,你知道怎麼讓其居中嗎?下面我們來看一下。

1

首先我們的程式碼裡先引入jquery指令碼庫,和Jquery UI庫。


2

html裡就需要一個簡單的div就行了,這個作為彈出框的內容。


3

要生成Dialog彈出框,直接呼叫dialog方法就行了,呼叫的物件就是剛才html裡的div。


4

執行頁面,我們可以看到現在的彈出框,已經正常顯示出來了,而且可以看到,在預設情況下,這個彈出框就已經居中了。這是因為彈出框預設的position屬性就是設定居中的,是相對於window整個視窗來居中的。


5

如果你要設定讓其相對於某個容器居中,而不是相對整個視窗來居中,那麼我們可以設定position屬性裡的of引數,將其設定為對應的容器就行了。

position: { my: "center", at: "center", of: "#bd_container" },

bd_container就是一個div容器的id,我們讓彈出框相對這個div居中。


6

bd_container這個div設定一下樣式,讓其寬為600px,高為300px。


7

重新執行頁面,可以看到現在的彈出框對於整個頁面是不居中的。


8

但對於它的父視窗div,它是居中的。



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