本文實(shí)例為大家分享了JQuery實(shí)現(xiàn)頁面彈出框的具體代碼，供大家參考，具體內(nèi)容如下

bootstrap4里面有個(gè)模態(tài)框，點(diǎn)擊頁面中的某個(gè)按鈕或者元素就會(huì)彈出一個(gè)框框：

今天嘗試用JQ來實(shí)現(xiàn)一下，具體的思路就是：

1、在頁面中創(chuàng)建一個(gè)div
2、用JQ中的hide()和show()來控制上面的div的隱藏和顯示

第一步：創(chuàng)建按鈕，div，樣式

?? ?
?? ?
?? ?
?? ?

?? ?點(diǎn)擊顯示彈出框
?? ?

?? ??? ?//里面是彈出框的內(nèi)容?? ?
?? ?

第二步：引入JQ文件和寫函數(shù)實(shí)現(xiàn)功能

效果：

第三步：優(yōu)化一下彈出框的細(xì)節(jié)，比如右上角給它加個(gè)關(guān)閉的功能等等，放上全部代碼

?? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ?
?? ?
?? ??? ?點(diǎn)擊顯示彈出框
?? ??? ?

?? ??? ??? ?
?? ??? ??? ?

?? ??? ??? ??? ?彈出框
?? ??? ??? ??? ?x
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?

?? ??? ??? ?
?? ??? ??? ?

?? ??? ?
?? ?
?? ?
?? ?

最終效果：

上面這就是用JQ對(duì)彈出框功能的實(shí)現(xiàn)，實(shí)際應(yīng)用中建議從外部引入CSS文件，免得太亂了，還有就是JQ的show()和hide()可以設(shè)置speed參數(shù)，就顯示和隱藏的速度，會(huì)有一個(gè)淡入淡出的效果。

hide(1000);
show(1000);