彈窗是網(wǎng)頁中經(jīng)常看到的效果，以前的彈窗是用window.open()等方式在瀏覽器窗口新建另一個新窗口來完成的，這種彈窗方式現(xiàn)在已經(jīng)被很多瀏覽器所攔截。今天我們來用更加友好的方式來實(shí)現(xiàn)彈窗效果。完成的功能效果如圖：
如圖，在瀏覽器的左上方是兩個button按鈕，按下之后分別彈出左下角的窗口和中間的窗口，右下角的窗口當(dāng)頁面加載完成之后自動慢慢顯示，之后又徐徐的淡出。基于div+css的模式，我們的先來建立html頁面。
window.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery實(shí)戰(zhàn):窗口效果</title><link type="text/css" rel="stylesheet" href="../css/window.css" rel="external nofollow" /><script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="../js/window.js"></script></head><body> <input type="button" value="左下角顯示窗口" id="leftpop" /> <input type="button" value="屏幕中間顯示窗口" id="centerpop" /> <div class="window" id="left"> <div class="title"> <img alt="關(guān)閉" src="../image/close.gif" /> 我是左邊顯示窗口的標(biāo)題欄 </div> <div class="content"> 我是左邊顯示窗口的內(nèi)容區(qū) </div> </div> <div class="window" id="center"> <div class="title"> <img alt="關(guān)閉" src="../image/close.gif" /> 我是中間顯示窗口的標(biāo)題欄 </div> <div class="content"> <p>我是中間顯示窗口的內(nèi)容區(qū)</p> </div> </div> <div class="window" id="right"> <div class="title"> <img alt="關(guān)閉" src="../image/close.gif" /> 我是右邊顯示窗口的標(biāo)題欄 </div> <div class="content"> 我是右邊顯示窗口的內(nèi)容區(qū) </div> </div></body></html>
從html代碼中可以看到，這里的窗口是用div來實(shí)現(xiàn)的，目前的html代碼只是描繪了頁面的基本骨架，能夠效果離窗口效果還相差甚遠(yuǎn)，不過別急，添加上css代碼，頁面相對就好看多了。
window.css
.window { background-color: #D0DEF0; width: 250px; /*padding: 2px;*/ margin: 5px; /*控制窗口絕對定位*/ position: absolute; display: none;}.content { height: 150px; background-color: white; border: 2px solid #D0DEF0; padding: 2px; /*控制區(qū)域內(nèi)容超過指定高度和寬度時顯示滾動條*/ overflow: auto;}.title { padding: 4px; font-size: 14px;}.title img { width: 14px; height: 14px; float: right; cursor: pointer;}為了看到當(dāng)前效果，先將.window的display屬性注釋掉，或者將它的屬性值改為”block”，看到的效果如圖：
其實(shí)三個窗口是由三個div組成,每個div分為title和content兩部分，title是標(biāo)題欄區(qū)域，content是內(nèi)容區(qū)域。為了達(dá)到窗口的視覺效果，給我們的title標(biāo)題欄區(qū)域加背景顏色background-color，然后給我們的content內(nèi)容區(qū)域加邊框border: 2px solid #D0DEF0;，邊框的顏色與標(biāo)題欄一致。此時的效果如上圖，目前只能看到一個窗口的原因是三個div占據(jù)了相同的位置，第三個窗口遮蓋住了前兩個窗口。不過沒關(guān)系，我們可以用JavaScript代碼來控制三個div的位置。
jQuery庫函數(shù)提供了豐富多彩的插件功能，今天我們來編寫自己的插件，簡單的案例如下：
$.fn.hello = function() { alert("hello:" + this.val()); return this;}只需要在需要的地方注冊上本插件就行了。相應(yīng)的，這里我們編寫的插件mywin來專門處理我們的窗口功能效果。
window.js
/*** 窗口位置的插件*/$.fn.mywin = function() { var windowobj = $(window); var browserWidth = $(window).width(); var browserHeight = $(window).height(); var scrollLeft = $(window).scrollLeft(); var scrollTop = $(window).scrollTop(); var cwinwidth = this.width(); var cwinheight = this.height(); var left = scrollLeft + (browserWidth - cwinwidth)/2; var top = cwinheight + (browserHeight - cwinheight)/2; this.css("left", left).css("top", top); $(this.children(".title").children("img")).click(function() { $(this).parent().parent().hide("slow"); }); return this;}上訴代碼編寫了本應(yīng)用中中間窗口案例的插件，調(diào)用代碼如下：
window.js
$(document).ready(function() { $("#centerpop").click(function() { $("#center").mywin().show("slow"); });});插件中的代碼思路是：為了計算窗口div的left和top屬性值，我們需要拿到瀏覽器窗口的長browserWidth和寬browserHeight，以及窗口是否因?yàn)閮?nèi)容過多而又滾動條的位置scrollLeft和scrollTop。窗口div的left值=滾動條橫坐標(biāo)+(瀏覽器窗口的橫向長度-窗口div橫向長度)/2，top值=滾動條縱坐標(biāo)+(瀏覽器窗口的縱向長度-窗口div縱向長度)/2。
最終完成完整的jQuery代碼如下：
$(document).ready(function(){ var centerwin = $("#center"); var leftwin = $("#left"); var rightwin = $("#right"); $("#centerpop").click(function(){ //鼠標(biāo)點(diǎn)擊按鈕之后，把id為center的窗口顯示在頁面中間 //計算位于屏幕中間的窗口的左邊界和上邊界的值 //瀏覽器可視區(qū)域的寬和高，當(dāng)前窗口的寬和高 //需要考慮到橫向滾動條的當(dāng)前左邊界值以及縱向滾動條的當(dāng)前上邊界值 centerwin.show("slow"); }); $("#leftpop").click(function() { leftwin.slideDown("slow"); }); setTimeout(function () { centerwin.mywin({left: "center", top: "center"}); leftwin.mywin({left: "left", top: "bottom"}, function(){ leftwin.slideUp("slow"); }); var windowobj = $(window); var cwinwidth = rightwin.outerWidth(true); var cwinheight = rightwin.outerHeight(true); var browserwidth = windowobj.width(); var browserheight = windowobj.height(); var scrollLeft = windowobj.scrollLeft(); var scrollTop = windowobj.scrollTop(); var rleft = scrollLeft + browserwidth - cwinwidth; if ($.browser.safari) { rleft = rleft - 15; } if ($.browser.opera) { rleft = rleft + 15; } if ($.browser.msie && $.browser.version.indexOf("8") >= 0) { rleft = rleft - 20; } rightwin.mywin({left: "right", top: "bottom"}, function() { rightwin.hide(); },{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue(); },500);});/** *@param position表示窗口的最終位置,包含兩個屬性，一個是left，一個是top *@param hidefunc表示執(zhí)行窗口隱藏的方法 *@param initPos表示窗口初始位置，包含兩個屬性，一個是left，一個是top */$.fn.mywin = function(position, hidefunc, initPos) { if (position && position instanceof Object) { var positionleft = position.left; var positiontop = position.top; var left; var top; var windowobj = $(window); var currentwin = this; var cwinwidth; var cwinheight; var browserwidth; var browserheight; var scrollLeft; var scrollTop; //計算瀏覽器當(dāng)前可視區(qū)域的寬和高，以及滾動條左邊界，上邊界的值 function getBrowserDim() { browserwidth = windowobj.width(); browserheight = windowobj.height(); scrollLeft = windowobj.scrollLeft(); scrollTop = windowobj.scrollTop(); } //計算窗口真實(shí)的左邊界值 function calLeft(positionleft, scrollLeft, browserwidth, cwinwidth) { if (positionleft && typeof positionleft == "string") { if (positionleft == "center") { left = scrollLeft + (browserwidth - cwinwidth) / 2; } else if (positionleft == "left") { left = scrollLeft; } else if (positionleft == "right") { left = scrollLeft + browserwidth - cwinwidth; if ($.browser.safari) { left = left - 15; } if ($.browser.opera) { left = left + 15; } if ($.browser.msie && $.browser.version.indexOf("8") >= 0) { left = left - 20; } } else { left = scrollLeft + (browserwidth - cwinwidth) / 2; } } else if (positionleft && typeof positionleft == "number") { left = positionleft; } else { left = 0; } } //計算窗口真實(shí)的上邊界值 function calTop(positiontop, scrollTop, browserheight, cwinheight) { if (positiontop && typeof positiontop == "string") { if (positiontop == "center") { top = scrollTop + (browserheight - cwinheight) / 2; } else if (positiontop == "top") { top = scrollTop; } else if (positiontop == "bottom") { top = scrollTop + browserheight - cwinheight; if ($.browser.opera) { top = top - 25; } } else { top = scrollTop + (browserheight - cwinheight) / 2; } } else if (positiontop && typeof positiontop == "number") { top = positiontop; } else { top = 0; } } //移動窗口的位置 function moveWin() { calLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth); calTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight); currentwin.animate({ left: left, top: top },600); } //定義關(guān)閉按鈕的動作 currentwin.children(".title").children("img").click(function() { if (!hidefunc) { currentwin.hide("slow") ; } else { hidefunc(); } }); if (initPos && initPos instanceof Object) { var initLeft = initPos.left; var initTop = initPos.top; if (initLeft && typeof initLeft == "number") { currentwin.css("left", initLeft); } else { currentwin.css("left", 0); } if (initTop && typeof initTop == "number") { currentwin.css("top", initTop); } else { currentwin.css("top", 0); } currentwin.show(); } cwinwidth = currentwin.outerWidth(true); cwinheight = currentwin.outerHeight(true); currentwin.data("positionleft", positionleft); currentwin.data("positiontop", positiontop); getBrowserDim(); moveWin(); var scrollTimeout; //瀏覽器滾動條滾動時，移動窗口的位置 $(window).scroll(function(){ //判斷一下當(dāng)前窗口是否可見 if (!currentwin.is(":visible")) { return; } clearTimeout(scrollTimeout); scrollTimeout = setTimeout(function(){ getBrowserDim(); moveWin(); },300); }); //瀏覽器大小改變時，移動窗口的位置 $(window).resize(function(){ //判斷一下當(dāng)前窗口是否可見 if (!currentwin.is(":visible")) { return; } getBrowserDim(); moveWin(); }); //返回當(dāng)前對象，以便可以級聯(lián)的執(zhí)行其他方法 return currentwin; }}左下角和中間窗口的div是靠觸發(fā)click事件來顯示窗口，在滾動條滾動時觸發(fā)scroll事件來重新調(diào)用計算div的top和left的函數(shù)。右下角的窗口是徐徐升起的窗口，所以在文檔加載完成的時候就顯示窗口，處理的代碼是放在setTimeout()事件里面，setTimeout函數(shù)里面的fadeOut讓窗口達(dá)到漸變透明的效果。
案例代碼托管地址：https://github.com/shizongger/JqueryInAction
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
