!DOCTYPEhtmlPUBLIC\"-//W3C//DTDXHTML1.0Transitional//EN\"\"\"htmlxmlns=\"\"headmetahttp-equiv=\"Content-Type\"content=\"text/html;charset=gb2312\"/title一个简单的网页弹出层/titlestyle*body#containerdiv#select_cityh3#main_city,#all_province#main_citydiv,#all_provincediv#main_cityh4,#all_provinceh4#main_citydivspan,#all_provincedivspan#float_lay/stylescripttype=\"text/javascript\"//弹出层functionopenLayer(objId,conId){vararrayPageSize=getPageSize();//调用getPageSize()函数vararrayPageScroll=getPageScroll();//调用getPageScroll()函数if(!document.getElementById(\"popupAddr\")){//创建弹出内容层varpopupDiv=document.createElement(\"div\");//给这个元素设置属性与样式popupDiv.setAttribute(\"id\",\"popupAddr\")popupDiv.style.position=\"absolute\";popupDiv.style.border=\"1pxsolid#ccc\";popupDiv.style.background=\"#fff\";popupDiv.style.zIndex=99;//创建弹出背景层varbodyBack=document.createElement(\"div\");bodyBack.setAttribute(\"id\",\"bodybg\")bodyBack.style.position=\"absolute\";bodyBack.style.width=\"100%\";bodyBack.style.height=(arrayPageSize[1]35\'px\');bodyBack.style.zIndex=98;bodyBack.style.top=0;bodyBack.style.left=0;bodyBack.style.filter=\"alpha(opacity=50)\";bodyBack.style.opacity=0.5;bodyBack.style.background=\"#ddf\";//实现弹出(插入到目标元素之后)varmybody=document.getElementById(objId);insertAfter(popupDiv,mybody);//执行函数insertAfter()insertAfter(bodyBack,mybody);//执行函数insertAfter()}//显示背景层document.getElementById(\"bodybg\").style.display=\"\";//显示内容层varpopObj=document.getElementById(\"popupAddr\")popObj.innerHTML=document.getElementById(conId).innerHTML;popObj.style.display=\"\";//让弹出层在页面中垂直左右居中(统一)//popObj.style.width=\"600px\";//popObj.style.height=\"400px\";//popObj.style.top=arrayPageScroll[1](arrayPageSize[3]-35-400)/2\'px\';//popObj.style.left=(arrayPageSize[0]-20-600)/2\'px\';//让弹出层在页面中垂直左右居中(个性)vararrayConSize=getConSize(conId)popObj.style.top=arrayPageScroll[1](arrayPageSize[3]-arrayConSize[1])/2-50\'px\';popObj.style.left=(arrayPageSize[0]-arrayConSize[0])/2-30\'px\';}//获取内容层内容原始尺寸functiongetConSize(conId){varconObj=document.getElementById(conId)conObj.style.position=\"absolute\";conObj.style.left=-1000\"px\";conObj.style.display=\"\";vararrayConSize=[conObj.offsetWidth,conObj.offsetHeight]conObj.style.display=\"none\";returnarrayConSize;}functioninsertAfter(newElement,targetElement){//插入varparent=targetElement.parentNode;if(parent.lastChild==targetElement){parent.appendChild(newElement);}else{parent.insertBefore(newElement,targetElement.nextSibling);}}//获取滚动条的高度functiongetPageScroll(){varyScroll;if(self.pageYOffset){yScroll=self.pageYOffset;}elseif(document.documentElement}elseif(document.body){yScroll=document.body.scrollTop;}arrayPageScroll=newArray(\'\',yScroll)returnarrayPageScroll;}//获取页面实际大小functiongetPageSize(){varxScroll,yScroll;if(window.innerHeightyScroll=window.innerHeightwindow.scrollMaxY;}elseif(document.body.scrollHeightdocument.body.offsetHeight){sScroll=document.body.scrollWidth;yScroll=document.body.scrollHeight;}else{xScroll=document.body.offsetWidth;yScroll=document.body.offsetHeight;}varwindowWidth,windowHeight;//varpageHeight,pageWidth;if(self.innerHeight){windowWidth=self.innerWidth;windowHeight=self.innerHeight;}elseif(document.documentElementwindowHeight=document.documentElement.clientHeight;}elseif(document.body){windowWidth=document.body.clientWidth;windowHeight=document.body.clientHeight;}varpageWidth,pageHeightif(yScrollwindowHeight){pageHeight=windowHeight;}else{pageHeight=yScroll;}if(xScrollwindowWidth){pageWidth=windowWidth;}else{pageWidth=xScroll;}arrayPageSize=newArray(pageWidth,pageHeight,windowWidth,windowHeight)returnarrayPageSize;}//关闭弹出层functioncloseLayer(){document.getElementById(\"popupAddr\").style.display=\"none\";document.getElementById(\"bodybg\").style.display=\"none\";returnfalse;}/scriptscripttype=\"text/javascript\"////对“拖动点”定义：onMousedown=\"StartDrag(this)\"onMouseup=\"StopDrag(this)\"onMousemove=\"Drag(this)\"即可varmove=false,oldcolor,_X,_Y;functionStartDrag(obj){//定义准备拖拽的函数obj.setCapture();//对当前对象的鼠标动作进行跟踪oldcolor=obj.style.backgroundColor;obj.style.background=\"#999\";move=true;//获取鼠标相对内容层坐标varparentwin=document.getElementById(\"popupAddr\");_X=parentwin.offsetLeft-event.clientX_Y=parentwin.offsetTop-event.clientY}functionDrag(obj){//定义拖拽函数if(move){varparentwin=document.getElementById(\"popupAddr\");parentwin.style.left=event.clientX_X;parentwin.style.top=event.clientY_Y;}}functionStopDrag(obj){//定义停止拖拽函数obj.style.background=oldcolor;obj.releaseCapture();//停止对当前对象的鼠标跟踪move=false;}/script/headbodyinputname=\"Input\"id=\"test\"value=\"点击弹出层\"type=\"button\"onclick=\"openLayer(\'test\',\'test_con\')\"/divid=\"test_con\"style=\"display:none\"divid=\"tab\"style=\"padding:8px;\"divid=\"tabtop\"divid=\"tabtop-L\"strong层的标题在这里/strong/divdivid=\"tabtop-R\"onclick=\"closeLayer()\"strong[关闭层]/strong/div/divdivid=\"tabcontent\"源码爱好者（CoreFans.net）提供各类编程源码、书籍教程下载。/div/div/divbrbrinputname=\"Input\"id=\"test3\"value=\"可拖动层\"type=\"button\"onclick=\"openLayer(\'test3\',\'test_con3\')\"/divid=\"test_con3\"style=\"display:\"divid=\"tab3\"style=\"width:360px;height:200px;background:#fee;\"divid=\"tabtop3\"divid=\"tabtop-L3\"onMousedown=\"StartDrag(this)\"onMouseup=\"StopDrag(this)\"onMousemove=\"Drag(this)\"strongstyle=\"color:red;font-size:20px\"可拖动层的标题/strong/divdivid=\"tabtop-R3\"onclick=\"closeLayer()\"strong[关闭层]/strong/div/divdivid=\"tabcontent3\"style=\"padding:8px\"欢迎来到源码爱好者/div/div/div/body/html
|
