Perfect simulation with Div createpopup pop-up window (script House correction version), Support Firefox,ie,chrome_javascript skills

Add an effect chart!

<ptml> <pead> <title> Simulation popup</title> <style type= "text/css" ><!--body{margin:0 ; padding:0; Text-align:center; } #container {margin:50px auto; padding:10px Auto; } #popupcontent {Position:absolute; border:1px solid #000000; line-height:17px; Background-color: #F7F7F4; Visibility:hidden; Cursor:default; Padding:2 5 2 5px; }--></style><style type= "Text/css" > body{margin:0; padding:0; Text-align:center; } #container {margin:50px auto; padding:10px Auto; } #popupcontent {Position:absolute; border:1px solid #000000; line-height:17px; Background-color: #F7F7F4; Visibility:hidden; Cursor:default; Padding:2 5 2 5px; }</style> <script type= "Text/javascript" ><!--/* Author:krison email:nickylans@163.com qq:398504533 * * var basetext = null; var where = ""; which link var xnum = 10; var yNum = 10; var w = 112; var h = 88; var Xcoord,ycoord; function _test (evt) {var src = evt.srcelement | | evt.target; return SRC; } function Checkwhere (e) {if (document.layers) {Xcoord = E.x-xnum; Ycoord = e.y + ynum; else if (document.all) {Xcoord = Event.clientx-xnum; Ycoord = Event.clienty + ynum; else if (document.getElementById) {Xcoord = E.clientx-xnum; Ycoord = E.clienty + ynum; } Document.onmousedown = Checkwhere; function Colordialogmouseout (obj) {obj.style.bordercolor= ""; Obj.bgcolor= ""; function Colordialogmouseover (obj) {obj.style.bordercolor= "#0A66EE"; Obj.bgcolor= "#EEEEEE"; function Colordialogmousedown (color) {ecolorpopup.value=color; document.getElementById (' popupcontent '). blur (); document.getElementById ("Neon_color"). Style.color = color; document.getElementById ("Popupcontent"). Style.visibility = "hidden"; function Colordialogmore () {var scolor=dlghelper.choosecolordlg (ecolorpopup.value); Scolor = SColor.tostring (16); if (Scolor.length < 6) {var stempstring = "000000". substring (0,6-scolor.length); Scolor = Stempstring.concat (Scolor); } ecolorpopup.value= "#" +scolor.touppercase (); PopUp.document.body.blur (); The function ColorDialog (event) {if (event). X) {var posx = event.x; else {var posx = Event.clientx; } if (event. Y) {var posy = event.y+10; else {var posy = event.clienty+10; The var popUp = document.getElementById ("popupcontent"); var bottomedge = Document.body.clientHeight.posY; PopUp.style.left = Document.body.scrollLeft + posx-popup.offsetwidth+ "px"; if (Bottomedge < document.getElementById ("Popupcontent"). offsetheight) PopUp.style.top = Document.body.scrollT OP + posy-popup.offsetheight+ "px"; else PopUp.style.top = Document.body.scrollTop + posy+ "px"; PopUp.style.width = w + "px"; PopUp.style.height = h + "px"; var e = _test (event); E.onkeyup=colordialog; Ecolorpopup = e; var ocbody; var opopbody = popUp; var colorlist=new Array (18); OPopBody.style.backgroundColor = "#f9f8f7"; OPopBody.style.border = "Solid #999999 1px"; OPopBody.style.fontSize = "12px"; Colorlist[0]= "#FF0000"; colorlist[1]= "#FF9900"; colorlist[2]= "#99CC00"; colorlist[3]= "#33CCCC"; Colorlist[4]= "#FF00FF"; colorlist[5]= "#FFCC00"; colorlist[6]= "#FFFF00"; colorlist[7]= "#00FF00"; Colorlist[8]= "#00FFFF"; colorlist[9]= "#00CCFF"; Colorlist[10]= "#FF99CC"; colorlist[11]= "#FFCC99"; colorlist[12]= "#FFFF99"; colorlist[13]= "#CCFFCC"; Colorlist[14]= "#CCFFFF"; colorlist[15]= "#99CCFF"; colorlist[16]= "#CC99FF"; colorlist[17]= "#FFFFFF"; Ocbody = ""; Ocbody + = "<table cellpadding=0 cellspacing=3>"; Ocbody + = "<tr height=\" 20\ "width=\" 20\ "><td align=\" Center\ "><table style=\" border:1px solid #808080 ; \ "Width=\" 12\ "height=\" 12\ "bgcolor=\" "+e.value+" \ "><tr><td></td></TR&GT;&LT;/TABLE&GT;&LT;/TD&GT;&LT;TD bgcolor=\ "eeeeee\" colspan=\ "7\" style=\ "font-size:12px;\" align=\ "Center\" > Current Color </td></tr> "; for (Var i=0;i<colorlist.length;i++) {if (i%6==0) ocbody + = "<tr>"; Ocbody + = "<td width=\" 14\ "height=\" 16\ "style=\" border:1px solid;\ "onmouseout=\" Parent.colordialogmouseout (this ); \ "Onmouseover=\" parent.colordialogmouseover (this); \ onmousedown=\ parent.colordialogmousedown (' "+colorlist[i ]+ "') \" align=\ "Center\" valign=\ "middle\" ><table style=\ "border:1px solid #808080; \" Width=\ "12\" height=\ "12\ "Bgcolor=\" "+colorlist[i]+" \ "><tr><td></td></tr></table></td>"; if (i%6==5) ocbody + = "</tr>"; Ocbody + = "</table>"; Opopbody.innerhtml=ocbody; if (Basetext = = null) Basetext = opopbody.innerhtml; opopbody.innerhtml = Basetext; oPopBody.style.visibility = "visible"; The function Hidepopup () {var popUp = document.getElementById ("Popupcontent"); popUp.style.visibility = "hidden"; }//--></script> </pead> <body> <div id= "container" > <input type= "text" value= "" name= "Neon_color" id= "Neon_color" onkeydown= "ColorDialog (event)" onmousedown= "ColorDialog (event)" Onfocus= "ColorDialog ( Event) "> <!--div try not to put it in the table, ie may explain the error--> <div id=" popupcontent "></div> </div> </bod Y> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]