div的頭部添加“編輯”按鈕，可以用Ajax進行設定.可以方便的進行擴充。
<html><br /><head><br /><title>_xWin</title><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </p><p><mce:style type='text/css'><!--</p><p>body{font-size:12px;}<br />a:visited{text-decoration:none;color:slategray;}<br />a:hover{text-decoration:underline;color:slategray;}<br />a:link{text-decoration:none;color:slategray;}<br />--></mce:style><style type='text/css' mce_bogus="1"><br />body{font-size:12px;}<br />a:visited{text-decoration:none;color:slategray;}<br />a:hover{text-decoration:underline;color:slategray;}<br />a:link{text-decoration:none;color:slategray;}</style><br /><mce:script language=JScript><!--</p><p>//可以打包為js檔案;<br />var x0=0,y0=0,x1=0,y1=0;<br />var offx=6,offy=6;<br />var moveable=false;<br />var hover='orange',normal='#336699';//color;<br />var index=10000;//z-index;<br />//開始拖動;<br />function startDrag(obj)<br />{<br />if(event.button==1)<br />{<br />//鎖定標題列;<br />obj.setCapture();<br />//定義對象;<br />var win = obj.parentNode;<br />var sha = win.nextSibling;<br />//記錄滑鼠和層位置;<br />x0 = event.clientX;<br />y0 = event.clientY;<br />x1 = parseInt(win.style.left);<br />y1 = parseInt(win.style.top);<br />//記錄顏色;<br />normal = obj.style.backgroundColor;<br />//改變風格;<br />obj.style.backgroundColor = hover;<br />win.style.borderColor = hover;<br />obj.nextSibling.style.color = hover;<br />sha.style.left = x1 + offx;<br />sha.style.top = y1 + offy;<br />moveable = true;<br />}<br />}<br />//拖動;<br />function drag(obj)<br />{<br />if(moveable)<br />{<br />var win = obj.parentNode;<br />var sha = win.nextSibling;<br />win.style.left = x1 + event.clientX - x0;<br />win.style.top = y1 + event.clientY - y0;<br />sha.style.left = parseInt(win.style.left) + offx;<br />sha.style.top = parseInt(win.style.top) + offy;<br />}<br />}<br />//停止拖動;<br />function stopDrag(obj)<br />{<br />if(moveable)<br />{<br />var win = obj.parentNode;<br />var sha = win.nextSibling;<br />var msg = obj.nextSibling;<br />win.style.borderColor = normal;<br />obj.style.backgroundColor = normal;<br />msg.style.color = normal;<br />sha.style.left = obj.parentNode.style.left;<br />sha.style.top = obj.parentNode.style.top;<br />obj.releaseCapture();<br />moveable = false;<br />}<br />}<br />//獲得焦點;<br />function getFocus(obj)<br />{<br />if(obj.style.zIndex!=index)<br />{<br />index = index + 2;<br />var idx = index;<br />obj.style.zIndex=idx;<br />obj.nextSibling.style.zIndex=idx-1;<br />}<br />}<br />//最小化;<br />function min(obj)<br />{<br />var win = obj.parentNode.parentNode;<br />var sha = win.nextSibling;<br />var tit = obj.parentNode;<br />var msg = tit.nextSibling;<br />var flg = msg.style.display=="none";<br />if(flg)<br />{<br />win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;<br />sha.style.height = win.style.height;<br />msg.style.display = "block";<br />obj.innerHTML = "0";<br />}<br />else<br />{<br />win.style.height = parseInt(tit.style.height) + 2*2;<br />sha.style.height = win.style.height;<br />obj.innerHTML = "2";<br />msg.style.display = "none";<br />}<br />}<br />//建立一個對象;<br />function xWin(id,w,h,l,t,tit,msg)<br />{<br />index = index+2;<br />this.id = id;<br />this.width = w;<br />this.height = h;<br />this.left = l;<br />this.top = t;<br />this.zIndex = index;<br />this.title = tit;<br />this.message = msg;<br />this.obj = null;<br />this.bulid = bulid;<br />this.bulid();<br />}<br />//初始化;<br />function bulid()<br />{<br />var str = ""<br />+ "<div id=xMsg" + this.id + " "<br />+ "style='"<br />+ "z-index:" + this.zIndex + ";"<br />+ "width:" + this.width + ";"<br />+ "height:" + this.height + ";"<br />+ "left:" + this.left + ";"<br />+ "top:" + this.top + ";"<br />+ "background-color:" + normal + ";"<br />+ "color:" + normal + ";"<br />+ "font-size:8pt;"<br />+ "font-family:Tahoma;"<br />+ "position:absolute;"<br />+ "cursor:default;"<br />+ "border:2px solid " + normal + ";"<br />+ "' "<br />+ "onmousedown='getFocus(this)'>"<br />+ "<div "<br />+ "style='"<br />+ "background-color:" + normal + ";"<br />+ "width:" + (this.width-2*2) + ";"<br />+ "height:20;"<br />+ "color:white;"<br />+ "' "<br />+ "onmousedown='startDrag(this)' "<br />+ "onmouseup='stopDrag(this)' "<br />+ "onmousemove='drag(this)' "<br />+ "ondblclick='min(this.childNodes[1])'"<br />+ ">"<br />+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"<br />+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"<br />+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(/""+this.id+"/",null)'>r</span>"<br />+ "</div>"<br />+ "<div style=""<br />+ "width:100%;"<br />+ "height:" + (this.height-20-4) + ";"<br />+ "background-color:white;"<br />+ "line-height:14px;"<br />+ "word-break:break-all;"<br />+ "padding:3px;"<br />+ "" mce_style=""<br />+ "width:100%;"<br />+ "height:" + (this.height-20-4) + ";"<br />+ "background-color:white;"<br />+ "line-height:14px;"<br />+ "word-break:break-all;"<br />+ "padding:3px;"<br />+ "">" + this.message + "</div>"<br />+ "</div>"<br />+ "<div id=xMsg" + this.id + "bg style=""<br />+ "width:" + this.width + ";"<br />+ "height:" + this.height + ";"<br />+ "top:" + this.top + ";"<br />+ "left:" + this.left + ";"<br />+ "z-index:" + (this.zIndex-1) + ";"<br />+ "position:absolute;"<br />+ "background-color:black;"<br />+ "filter:alpha(opacity=40);"<br />+ "" mce_style=""<br />+ "width:" + this.width + ";"<br />+ "height:" + this.height + ";"<br />+ "top:" + this.top + ";"<br />+ "left:" + this.left + ";"<br />+ "z-index:" + (this.zIndex-1) + ";"<br />+ "position:absolute;"<br />+ "background-color:black;"<br />+ "filter:alpha(opacity=40);"<br />+ ""></div>";<br />document.body.insertAdjacentHTML("beforeEnd",str);<br />}<br />//顯示隱藏視窗<br />function ShowHide(id,dis){<br />var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis<br />document.getElementById("xMsg"+id).style.display = bdisplay;<br />document.getElementById("xMsg"+id+"bg").style.display = bdisplay;<br />}<br />// --></mce:script> </p><p><mce:script language='JScript'><!--</p><p>function initialize()<br />{<br />var a = new xWin("1",160,200,200,200,"視窗1","xWin <br/> A Cool Pop Div Window<br/>Version:1.0<br/>2002-8-13");<br />var b = new xWin("2",240,200,100,100,"視窗2","Welcome to visited my personal website:<br/><a href= http://www..net target=_blank> http://www.mxqn.net</a><br/>anducanalsosignmyguestbookat:<br/><ahref= http://www ... mxqn.net</a><br/><br/>thx!!!=)...");<br />var c = new xWin("3",750,700,140,10,"<center>簡歷</center>","Copyright by 網頁一班!");<br />ShowHide("1","none");<br />ShowHide("2","none");<br />ShowHide("3","none");//隱藏視窗1<br />center('1');center('2');center('3');<br />}<br />window.onload = initialize;<br />//--><br />function center(id)<br />{<br />xwin = document.getElementById("xMsg"+id);<br />var wleft = (document.body.clientWidth-xwin.style.width.replace("px",""))/2 < 0 ? 0 : (document.body.clientWidth-xwin.style.width.replace("px",""))/2;<br />var wtop = (document.body.clientHeight-xwin.style.height.replace("px",""))/2 < 0 ? 0 : (document.body.clientHeight-xwin.style.height.replace("px",""))/2;; </p><p>xwin.style.left = wleft;<br />xwin.style.top = wtop; </p><p>xwinbg = document.getElementById("xMsg"+id+"bg");<br />xwinbg.style.left = wleft;<br />xwinbg.style.top = wtop;<br />}<br />// --></mce:script><br /></head><br /><!--<base target="_blank">--><br /><body onselectstart='return false' oncontextmenu='return false'><br /><a href="javascript:ShowHide('1',null)" mce_href="javascript:ShowHide('1',null)" >視窗1</a><br /><a href="javascript:ShowHide('2',null)" mce_href="javascript:ShowHide('2',null)">視窗2</a><br /><a href="javascript:ShowHide('3',null)" mce_href="javascript:ShowHide('3',null)">視窗3</a><br /></body><br /></html><br />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
