這篇文章給大家分享的是有關(guān)jQuery如何實(shí)現(xiàn)彈出窗口彈出div層的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的五原網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

通過今天的jquery實(shí)例學(xué)習(xí)，我們要達(dá)到這樣的效果：點(diǎn)擊頁(yè)面的鏈接，彈出一個(gè)div層，同時(shí)頁(yè)面的其他部分變灰并且不能點(diǎn)擊；無論是改變?yōu)g覽器窗口大小還是下拉滾動(dòng)條，這個(gè)彈出層都能始終保持居中；點(diǎn)擊頁(yè)面的關(guān)閉按鈕，彈出層消失，頁(yè)面恢復(fù)原樣。

這里借鑒之前的一篇文章《基于jQuery的固定飄浮層》，使彈出窗口可以始終固定在瀏覽器的正中間。在這里有一個(gè)要點(diǎn)，就是如何使頁(yè)面的其他地方在彈出窗口的同時(shí)變灰。我使用的方法就是在點(diǎn)擊鏈接彈出div層的時(shí)候，給頁(yè)面增加一個(gè)div層，這個(gè)層就“負(fù)責(zé)”使頁(yè)面變灰。點(diǎn)擊關(guān)閉后，刪除這個(gè)層就能使頁(yè)面恢復(fù)原樣。

其他應(yīng)該沒什么問題了，還是很簡(jiǎn)單的，在這里順便貼上jQuery代碼：

$(function(){ 
　　var screenwidth,screenheight,mytop,getPosLeft,getPosTop 
　　screenwidth = $(window).width(); 
　　screenheight = $(window).height(); 
　　//獲取滾動(dòng)條距頂部的偏移 
　　mytop = $(document).scrollTop(); 
　　//計(jì)算彈出層的left 
　　getPosLeft = screenwidth/2 - 260; 
　　//計(jì)算彈出層的top 
　　getPosTop = screenheight/2 - 150; 
　　//css定位彈出層 
　　$("#box").css({"left":getPosLeft,"top":getPosTop}); 
　　//當(dāng)瀏覽器窗口大小改變時(shí)... 
　　$(window).resize(function(){ 
　　  screenwidth = $(window).width(); 
　　  screenheight = $(window).height(); 
　　  mytop = $(document).scrollTop(); 
　　  getPosLeft = screenwidth/2 - 260; 
　　  getPosTop = screenheight/2 - 150; 
　　  $("#box").css({"left":getPosLeft,"top":getPosTop+mytop}); 
　　}); 
　　//當(dāng)拉動(dòng)滾動(dòng)條時(shí)... 
　　$(window).scroll(function(){ 
　　  screenwidth = $(window).width(); 
　　  screenheight = $(window).height(); 
　　  mytop = $(document).scrollTop(); 
　　  getPosLeft = screenwidth/2 - 260; 
　　  getPosTop = screenheight/2 - 150; 
　　  $("#box").css({"left":getPosLeft,"top":getPosTop+mytop}); 
　　}); 
　　//點(diǎn)擊鏈接彈出窗口 
　　$("#popup").click(function(){ 
　　  $("#box").fadeIn("fast"); 
　　  //獲取頁(yè)面文檔的高度 
　　  var docheight = $(document).height(); 
　　  //追加一個(gè)層，使背景變灰 
　　  $("body").append("