本文執行個體講述了jQuery實現的類比快顯視窗功能。分享給大家供大家參考,具體如下:
//初始化文檔$(document).ready();//----------------彈出DIV仿模態視窗開始----------------var divW; //DIV寬度var divH; //DIV高度var clientH; //瀏覽器高度var clientW; //瀏覽器寬度var divTitle; //DIV標題var pageUrl; //DIV中載入的頁面var div_X; //DIV橫座標var div_Y; //DIV縱座標function DivWindowOpen(divWidth,divHeight,title,url){ divW = divWidth; //DIV寬度 divH = divHeight; //DIV高度 divTitle = title; //DIV高度 pageUrl = url; //DIV中載入的頁面UR lockScreen(); //鎖定背景 divOpen(); $("#divTitle").append(divTitle); $("#divContent").load(pageUrl); //交換X圖片 $("#x").hover( function(){ $(this).attr("src","images/Close-2.gif"); }, function(){ $(this).attr("src","images/Close-1.gif"); } ); //關閉DIV視窗 $("#x").click( function(){ clearDivWindow(); clearLockScreen(); } );}//返回彈出的DIV的座標function divOpen(){ var minTop = 80; //彈出的DIV記頂部的最小距離 if($("#divWindow").length == 0){ clientH = $(window).height(); //瀏覽器高度 clientW = $(window).width(); //瀏覽器寬度 div_X = (clientW - divW)/2; //DIV橫座標 div_Y = (clientH - divH)/2; //DIV縱座標 div_X += window.document.documentElement.scrollLeft; //DIV顯示的實際橫座標 div_Y += window.document.documentElement.scrollTop; //DIV顯示的實際縱座標 if(div_Y < minTop){ div_Y = minTop; } $("body").append("<div id='divWindow'><div id='divTitle'><img src='images/Close-1.gif' id='x' /></div><div id='divContent'>載入中</div></div>"); //增加DIV //divWindow的樣式 $("#divWindow").css("position","absolute"); $("#divWindow").css("z-index","200"); $("#divWindow").css("left",(div_X + "px")); //定位DIV的橫座標 $("#divWindow").css("top",(div_Y + "px")); //定位DIV的縱座標 $("#divWindow").css("opacity","0.9"); $("#divWindow").width(divW); $("#divWindow").height(divH); $("#divWindow").css("background-color","#FFFFFF"); $("#divWindow").css("border","solid 1px #333333"); //divTitle的樣式 $("#divTitle").css("height","20px"); $("#divTitle").css("line-height","20px"); $("#divTitle").css("background-color","#333333"); $("#divTitle").css("padding","3px 5px 1px 5px"); $("#divTitle").css("color","#FFFFFF"); $("#divTitle").css("font-weight","bold"); //x的樣式 $("#x").css("float","right"); $("#x").css("cursor","pointer"); //divContent的樣式 $("#divContent").css("padding","10px"); } else{ clientH = $(window).height(); //瀏覽器高度 clientW = $(window).width(); //瀏覽器寬度 div_X = (clientW - divW)/2; //DIV橫座標 div_Y = (clientH - divH)/2; //DIV縱座標 div_X += window.document.documentElement.scrollLeft; //DIV顯示的實際橫座標 div_Y += window.document.documentElement.scrollTop; //DIV顯示的實際縱座標 if(div_Y < minTop){ div_Y = minTop; } $("#divWindow").css("left",(div_X + "px")); //定位DIV的橫座標 $("#divWindow").css("top",(div_Y + "px")); //定位DIV的縱座標 }}//鎖定背景螢幕function lockScreen(){ if($("#divLock").length == 0){ //判斷DIV是否存在 clientH = $(window).height(); //瀏覽器高度 clientW = $(window).width(); //瀏覽器寬度 //var docH = $("body").height(); //網頁高度 //var docW = $("body").width(); //網頁寬度 //var bgW = clientW > docW ? clientW : docW; //取有效寬 //var bgH = clientH > docH ? clientH : docH; //取有效高 $("body").append("<div id='divLock'></div>") //增加DIV $("#divLock").height(clientH); $("#divLock").width(clientW); $("#divLock").css("display","block"); $("#divLock").css("background-color","#000000"); $("#divLock").css("position","fixed"); $("#divLock").css("z-index","100"); $("#divLock").css("top","0px"); $("#divLock").css("left","0px"); $("#divLock").css("opacity","0.5"); } else{ clientH = $(window).height(); //瀏覽器高度 clientW = $(window).width(); //瀏覽器寬度 $("#divLock").height(clientH); $("#divLock").width(clientW); }}//清除背景鎖定function clearLockScreen(){ $("#divLock").remove();}//清除DIV視窗function clearDivWindow(){ $("#divWindow").remove();}//視窗大小改變時$(window).resize( function(){ if($("#divLock").length != 0){ lockScreen(); } if($("#divWindow").length != 0){ divOpen(); } });//----------------彈出DIV仿模態視窗結束----------------//改變風格function ChangeStyle(styleName){ skinName = styleName; //SetCookie("Skin", skinName); alert(styleName); window.location.reload();}
更多關於jQuery相關內容感興趣的讀者可查看本站專題:《jQuery視窗操作技巧總結》、《jQuery擴充技巧總結》、《jQuery常用外掛程式及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選取器用法總結》
希望本文所述對大家jQuery程式設計有所協助。