jQuery实现的模拟弹出窗口功能示例
本文实例讲述了jQuery实现的模拟弹出窗口功能。分享给大家供大家参考,具体如下:
//初始化文档 $(document).ready(); //----------------弹出DIV仿模态窗口开始---------------- vardivW;//DIV宽度 vardivH;//DIV高度 varclientH;//浏览器高度 varclientW;//浏览器宽度 vardivTitle;//DIV标题 varpageUrl;//DIV中加载的页面 vardiv_X;//DIV横坐标 vardiv_Y;//DIV纵坐标 functionDivWindowOpen(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的坐标 functiondivOpen(){ varminTop=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("<divid='divWindow'><divid='divTitle'><imgsrc='images/Close-1.gif'id='x'/></div><divid='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","solid1px#333333"); //divTitle的样式 $("#divTitle").css("height","20px"); $("#divTitle").css("line-height","20px"); $("#divTitle").css("background-color","#333333"); $("#divTitle").css("padding","3px5px1px5px"); $("#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的纵坐标 } } //锁定背景屏幕 functionlockScreen(){ if($("#divLock").length==0){//判断DIV是否存在 clientH=$(window).height();//浏览器高度 clientW=$(window).width();//浏览器宽度 //vardocH=$("body").height();//网页高度 //vardocW=$("body").width();//网页宽度 //varbgW=clientW>docW?clientW:docW;//取有效宽 //varbgH=clientH>docH?clientH:docH;//取有效高 $("body").append("<divid='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); } } //清除背景锁定 functionclearLockScreen(){ $("#divLock").remove(); } //清除DIV窗口 functionclearDivWindow(){ $("#divWindow").remove(); } //窗口大小改变时 $(window).resize( function(){ if($("#divLock").length!=0){ lockScreen(); } if($("#divWindow").length!=0){ divOpen(); } } ); //----------------弹出DIV仿模态窗口结束---------------- //改变风格 functionChangeStyle(styleName){ skinName=styleName; //SetCookie("Skin",skinName); alert(styleName); window.location.reload(); }
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。