JavaScript uses layers to simulate a removable small window _ page background

<ptml> <pead> <title> Cloud-dwelling Community layer Simulation Small window effect code </title> <meta http-equiv= "Content-type" content= " text/html; charset=gb2312 "> <meta name=" Description "content=" http://www.jb51.net "> <style type= ' text/css ' > < !--body{font-size:12px;} A:visited{text-decoration:none;color:slategray;} A:hover{text-decoration:underline;color:slategray;} A:link{text-decoration:none;color:slategray;} --> </style> <script language=jscript> <!--//can be packaged as JS file; var x0=0,y0=0,x1=0,y1=0; var offx=6,offy=6; var Moveable=false; var hover= ' Orange ', normal= ' #336699 ';//color; var Index=10000;//z-index; Start dragging; function StartDrag (obj) {if (event.button==1) {//Lock title bar; Obj.setcapture (); Define the object; var win = Obj.parentnode; var sha = win.nextsibling; Record mouse and layer position; x0 = Event.clientx; y0 = Event.clienty; X1 = parseint (win.style.left); Y1 = parseint (win.style.top); Record color; normal = Obj.style.backgroundColor; Change style; Obj.style.backgroundColor = Hover Win.style.borderColor = hover; Obj.nextSibling.style.color = hover; Sha.style.left = x1 + offx; Sha.style.top = y1 + offy; moveable = true; }//drag; function drag (obj) {if (moveable) {var win = Obj.parentnode; var sha = win.nextsibling; Win.style.left = x1 + event.clientx-x0; Win.style.top = y1 + event.clienty-y0; Sha.style.left = parseint (win.style.left) + offx; Sha.style.top = parseint (win.style.top) + offy; }}//Stop dragging; function Stopdrag (obj) {if (moveable) {var win = Obj.parentnode; var sha = win.nextsibling; var msg = obj.nextsibling; Win.style.borderColor = normal; Obj.style.backgroundColor = normal; Msg.style.color = normal; Sha.style.left = Obj.parentNode.style.left; Sha.style.top = Obj.parentNode.style.top; Obj.releasecapture (); moveable = false; }//Get focus; function GetFocus (obj) {if (obj.style.zindex!=index) {index = index + 2; var idx = index; Obj.style.zindex=idx; Obj.nextsibling.style.zindex=idx-1; }//Minimized; function min (obj) {var win = Obj.parentNode.parentNode; var sha = win.nextsibling; var tit = Obj.parentnode; var msg = tit.nextsibling; var flg = msg.style.display== "None"; if (FLG) {win.style.height = parseint (msg.style.height) + parseint (tit.style.height) + 2*2; Sha.style.height = Win.style.height; Msg.style.display = "block"; obj.innerhtml = "0"; else {win.style.height = parseint (tit.style.height) + 2*2; Sha.style.height = Win.style.height; obj.innerhtml = "2"; Msg.style.display = "None"; }//Create an object; function Xwin (id,w,h,l,t,tit,msg) {index = index+2; This.id = ID; This.width = W; This.height = h; This.left = l; This.top = t; This.zindex = index; This.title = tit; This.message = msg; This.obj = null; This.bulid = Bulid; This.bulid (); }//initialization; function Bulid () {var str = "" + "<div id=xmsg" + this.id + "" + "style=" "+" Z-index: "+ This.zindex +"; " + "width:" + this.width + ";" + "Height:" + this.height + ";" + "Left:" + tHis.left + ";" + "Top:" + This.top + ";" + "Background-color:" + normal + ";" + "COLOR:" + normal + ";" + "FONT-SIZE:8PT;" + "Font-family:tahoma;" + "Position:absolute;" + "Cursor:default;" + "border:2px solid" + normal + ";" + "'" + "onmousedown= ' GetFocus (this) ' >" + "<div" + "style= '" + "Background-color:" + normal + ";" + "width:" + (this.width-2*2) + ";" + "HEIGHT:20;" + "Color:white;" + "'" + "onmousedown= ' StartDrag (This) '" + "onmouseup= ' Stopdrag (This) '" + "onmousemove= ' drag (This) '" + "ondblclick= ' min (this.childnodes[1]) ' "+" > "+" <span + (this.width-2*12-4) + ";p adding-left:3px; > "+ this.title +" </span> "+" <span onclick= ' min (this) ' >0</span> ' + ' <span onclick= ' showhide ( \ "" "+this.id+" \ ", null) ' >r</span>" + "</div>" + "<div +" width:100%; " + "Height:" + (this.height-20-4) + ";" + "Background-color:white;" + "LINE-HEIGHT:14PX;" + "Word-break:break-all;" + "PADDING:3PX;" + "' >" + thiS.message + "</div>" + "</div>" + "<div id=xmsg" + this.id + "BG +" width: "+ this.width +"; + "Height:" + this.height + ";" + "Top:" + This.top + ";" + "Left:" + This.left + ";" + "Z-index:" + (this.zindex-1) + ";" + "Position:absolute;" + "Background-color:black;" + "Filter:alpha (opacity=40);" + "' ></div>"; Document.body.insertAdjacentHTML ("BeforeEnd", str); }//Show hidden window function Showhide (id,dis) {var bdisplay = (dis==null)? ( (document.getElementById ("Xmsg" +id). style.display== "")? None ":"):d is document.getElementById ("Xmsg" +id). style.display = Bdisplay; document.getElementById ("xmsg" +id+ "BG"). style.display = Bdisplay; }//--> </script> <script language= ' JScript ' > <!--function Initialize () {var a = new Xwin ("1", 1 60,200,200,200, "Window 1", "Xwin A cool Pop Div window chinaz.com chinaz.com"); var B = new Xwin ("2", 240,200,100,100, "Window 2", "Welcome to cloud-dwelling community: http://www.jb51.net Please give more advice oh, thank you for your attention! "); var c = new Xwin ("3", 200,160, 250, 50, "Window 3", "Copyright by chinaz.com!"); Showhide ("1", "none");/hidden window 1} window.onload = Initialize; --> </script> </pead> <base target= "_blank" > <body onselectstart= ' return false ' Oncontextmen U= ' return false ' > Window 1 window 2 window 3 </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]