這個(gè)彈窗是如下圖的效果。打開網(wǎng)頁的時(shí)候,這個(gè)彈窗會淡入,之后點(diǎn)擊右上角的關(guān)閉按鈕,其實(shí)就是一個(gè)& times;會淡出。采用淡入淡出是因?yàn)橹苯覬query一個(gè)fadeIn與fadeOut省事。如果采用窗口自下而上地移動(dòng),還要考慮p的position設(shè)置問題,這個(gè)問題還涉及一系列兼容性問題,很嚴(yán)重。之所以稱之為純js的右下角彈窗,是因?yàn)椋谌我忭撁妫恍枰缦乱隞query之后,再引入這個(gè)Js,則可以使用,唯一注意就是Jquery的引入一定要在這個(gè)Js之前,由于我的JS是全基于Jquery寫成的。沒Jquery支持可不行。這個(gè)彈窗的Js代碼notice_pop.js如下:" />
background-color: #ccffcc">這個(gè)彈窗是如下圖的效果:
打開網(wǎng)頁的時(shí)候,這個(gè)彈窗會淡入,之后點(diǎn)擊右上角的關(guān)閉按鈕,其實(shí)就是一個(gè)& times;會淡出。
采用淡入淡出是因?yàn)橹苯覬query一個(gè)fadeIn與fadeOut省事。如果采用窗口自下而上地移動(dòng),還要考慮p的position設(shè)置問題,這個(gè)問題還涉及一系列兼容性問題,很嚴(yán)重。
之所以稱之為純js的右下角彈窗,是因?yàn)椋谌我忭撁妫恍枰缦乱隞query之后,再引入這個(gè)Js,則可以使用,唯一注意就是Jquery的引入一定要在這個(gè)Js之前,由于我的JS是全基于Jquery寫成的。沒Jquery支持可不行。
這個(gè)彈窗的Js代碼notice_pop.js如下:
說是Jquery其實(shí)更多是HTML的內(nèi)容,關(guān)鍵是設(shè)置p的position為absolute,加個(gè)灰色的1px的邊框給它,在zindex上面設(shè)置為最高,之后安排在 瀏覽器高度/寬度-其大小的位置,再擺到右下角。
在其里面的標(biāo)題子面板,放兩個(gè)float的p,一個(gè)在左,一個(gè)在右,以實(shí)現(xiàn)彈框標(biāo)題和關(guān)閉按鈕,分居兩側(cè)的效果,再用clear:both清請這個(gè)float。給下面的內(nèi)容讓路。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com