用DIV完美模拟createPopup 弹出窗口(脚本之家修正版)，支持Firefox,ie,chrome_javascript技巧

补增一个效果图！

<title>模拟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(); } 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; } 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.scrollTop + 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 bgcolor=\"eeeeee\" colspan=\"7\" style=\" font-size:12px;\" align=\"center\">当前颜色"; 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>"; if(i%6==5) ocbody += ""; } ocbody += ""; oPopBody.innerHTML=ocbody; if (baseText == null) baseText = oPopBody.innerHTML; oPopBody.innerHTML = baseText ; oPopBody.style.visibility = "visible"; } function hidePopup() { var popUp = document.getElementById("popupcontent"); popUp.style.visibility = "hidden"; } // --></script> <div id="container"> <input type="text" value="" name="neon_color" id="neon_color" onkeydown="colordialog(event)" onmousedown="colordialog(event)" onfocus="colordialog(event)"> <!-- div尽量别放入table里，IE可能会解释出错 --> <div id="popupcontent"></div> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]