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

　　补增一个效果图！

<html> 
<head> 
<title>模拟Popup</title> 
<style type="text/css"></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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C!--%20%0D%0A%2F*%20%0D%0Aauthor%20%3AKrison%20%0D%0Aemail%3Anickylans%40163.com%20%0D%0Aqq%3A398504533%20%0D%0A*%2F%20%0D%0Avar%20baseText%20%3D%20null%3B%20%0D%0Avar%20where%20%3D%20%22%22%3B%20%2F%2F%20which%20link%20%0D%0Avar%20xNum%20%3D%2010%3B%20%0D%0Avar%20yNum%20%3D%2010%3B%20%0D%0Avar%20w%20%3D%20112%3B%20%0D%0Avar%20h%20%3D%2088%3B%20%0D%0Avar%20xCoord%2CyCoord%3B%20%0D%0Afunction%20_test(evt)%20%0D%0A%7B%20%0D%0Avar%20src%20%3D%20evt.srcElement%20%7C%7C%20evt.target%3B%20%0D%0Areturn%20src%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20checkwhere(e)%20%7B%20%0D%0Aif%20(document.layers)%7B%20%0D%0AxCoord%20%3D%20e.x%20-%20xNum%3B%20%0D%0AyCoord%20%3D%20e.y%20%2B%20yNum%3B%20%0D%0A%7D%20%0D%0Aelse%20if%20(document.all)%7B%20%0D%0AxCoord%20%3D%20event.clientX%20-%20xNum%3B%20%0D%0AyCoord%20%3D%20event.clientY%20%2B%20yNum%3B%20%0D%0A%7D%20%0D%0Aelse%20if%20(document.getElementById)%7B%20%0D%0AxCoord%20%3D%20e.clientX%20-%20xNum%3B%20%0D%0AyCoord%20%3D%20e.clientY%20%2B%20yNum%3B%20%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0Adocument.onmousedown%20%3D%20checkwhere%3B%20%0D%0A%0D%0Afunction%20colordialogmouseout(obj)%7B%20%0D%0Aobj.style.borderColor%3D%22%22%3B%20%0D%0Aobj.bgColor%3D%22%22%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20colordialogmouseover(obj)%7B%20%0D%0Aobj.style.borderColor%3D%22%230A66EE%22%3B%20%0D%0Aobj.bgColor%3D%22%23EEEEEE%22%3B%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Afunction%20colordialogmousedown(color)%7B%20%0D%0AecolorPopup.value%3Dcolor%3B%20%0D%0A%20%20%20%20document.getElementById('popupcontent').blur()%3B%20%0D%0Adocument.getElementById(%22neon_color%22).style.color%20%3D%20color%3B%20%0D%0A%20%20%20%20document.getElementById(%22popupcontent%22).style.visibility%20%3D%20%22hidden%22%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20colordialogmore()%7B%20%0D%0Avar%20sColor%3DdlgHelper.ChooseColorDlg(ecolorPopup.value)%3B%20%0D%0AsColor%20%3D%20sColor.toString(16)%3B%20%0D%0Aif%20(sColor.length%20%3C%206)%20%7B%20%0D%0Avar%20sTempString%20%3D%20%22000000%22.substring(0%2C6-sColor.length)%3B%20%0D%0AsColor%20%3D%20sTempString.concat(sColor)%3B%20%0D%0A%7D%20%0D%0AecolorPopup.value%3D%22%23%22%2BsColor.toUpperCase()%3B%20%0D%0ApopUp.document.body.blur()%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20colordialog(event)%7B%20%0D%0Aif(event.X)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20posX%20%3D%20event.x%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20posX%20%3D%20event.clientX%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(event.Y)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20posY%20%3D%20event.y%2B10%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20posY%20%3D%20event.clientY%2B10%3B%20%0D%0A%20%20%20%20%7D%20%0D%0Avar%20popUp%20%3D%20document.getElementById(%22popupcontent%22)%3B%20%0D%0A%0D%0Avar%20bottomedge%20%3D%20document.body.clientHeight.posY%3B%20%0D%0A%20%20%20%20%20%20%20%20popUp.style.left%20%3D%20document.body.scrollLeft%20%2B%20posX%20-%20popUp.offsetWidth%2B%22px%22%3B%20%0D%0A%0D%0A%20%20%20%20if%20(bottomedge%20%3C%20document.getElementById(%22popupcontent%22).offsetHeight)%20%0D%0A%20%20%20%20%20%20%20%20popUp.style.top%20%3D%20document.body.scrollTop%20%2B%20posY-%20popUp.offsetHeight%2B%22px%22%3B%20%0D%0A%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20popUp.style.top%20%3D%20document.body.scrollTop%20%2B%20posY%2B%22px%22%3B%20%0D%0A%0D%0A%20%20%20%20popUp.style.width%20%3D%20w%20%2B%20%22px%22%3B%20%0D%0A%20%20%20%20popUp.style.height%20%3D%20h%20%2B%20%22px%22%3B%20%0D%0A%0D%0A%20%20%20%20var%20e%20%3D%20_test(event)%3B%20%0D%0A%20%20%20%20e.onkeyup%3Dcolordialog%3B%20%0D%0AecolorPopup%20%3D%20e%3B%20%0D%0A%0D%0A%20%20%20%20var%20ocbody%3B%20%0D%0A%20%20%20%20%20%0D%0Avar%20oPopBody%20%3D%20popUp%3B%20%0D%0A%20%20%20%20%20%0D%0Avar%20colorlist%3Dnew%20Array(18)%3B%20%0D%0AoPopBody.style.backgroundColor%20%3D%20%22%23f9f8f7%22%3B%20%0D%0AoPopBody.style.border%20%3D%20%22solid%20%23999999%201px%22%3B%20%0D%0AoPopBody.style.fontSize%20%3D%20%2212px%22%3B%20%0D%0A%0D%0Acolorlist%5B0%5D%3D%22%23FF0000%22%3Bcolorlist%5B1%5D%3D%22%23FF9900%22%3Bcolorlist%5B2%5D%3D%22%2399CC00%22%3Bcolorlist%5B3%5D%3D%22%2333CCCC%22%3B%20%0D%0A%0D%0Acolorlist%5B4%5D%3D%22%23FF00FF%22%3Bcolorlist%5B5%5D%3D%22%23FFCC00%22%3Bcolorlist%5B6%5D%3D%22%23FFFF00%22%3Bcolorlist%5B7%5D%3D%22%2300FF00%22%3B%20%0D%0Acolorlist%5B8%5D%3D%22%2300FFFF%22%3Bcolorlist%5B9%5D%3D%22%2300CCFF%22%3B%20%0D%0A%0D%0Acolorlist%5B10%5D%3D%22%23FF99CC%22%3Bcolorlist%5B11%5D%3D%22%23FFCC99%22%3Bcolorlist%5B12%5D%3D%22%23FFFF99%22%3Bcolorlist%5B13%5D%3D%22%23CCFFCC%22%3B%20%0D%0Acolorlist%5B14%5D%3D%22%23CCFFFF%22%3Bcolorlist%5B15%5D%3D%22%2399CCFF%22%3Bcolorlist%5B16%5D%3D%22%23CC99FF%22%3Bcolorlist%5B17%5D%3D%22%23FFFFFF%22%3B%20%0D%0A%0D%0A%0D%0Aocbody%20%3D%20%22%22%3B%20%0D%0Aocbody%20%2B%3D%20%22%3Ctable%20CELLPADDING%3D0%20CELLSPACING%3D3%3E%22%3B%20%0D%0Aocbody%20%2B%3D%20%22%3Ctr%20height%3D%5C%2220%5C%22%20width%3D%5C%2220%5C%22%3E%3Ctd%20align%3D%5C%22center%5C%22%3E%3Ctable%20style%3D%5C%22%20border%3A1px%20solid%20%23808080%3B%5C%22%20width%3D%5C%2212%5C%22%20height%3D%5C%2212%5C%22%20bgcolor%3D%5C%22%22%2Be.value%2B%22%5C%22%3E%3Ctr%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%3C%2Ftd%3E%3Ctd%20bgcolor%3D%5C%22eeeeee%5C%22%20colspan%3D%5C%227%5C%22%20style%3D%5C%22%20font-size%3A12px%3B%5C%22%20align%3D%5C%22center%5C%22%3E%E5%BD%93%E5%89%8D%E9%A2%9C%E8%89%B2%3C%2Ftd%3E%3C%2Ftr%3E%22%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Ccolorlist.length%3Bi%2B%2B)%7B%20%0D%0Aif(i%256%3D%3D0)%20%0D%0Aocbody%20%2B%3D%20%22%3Ctr%3E%22%3B%20%0D%0Aocbody%20%2B%3D%20%22%3Ctd%20width%3D%5C%2214%5C%22%20height%3D%5C%2216%5C%22%20style%3D%5C%22%20border%3A1px%20solid%3B%5C%22%20onMouseOut%3D%5C%22parent.colordialogmouseout(this)%3B%5C%22%20onMouseOver%3D%5C%22parent.colordialogmouseover(this)%3B%5C%22%20onMouseDown%3D%5C%22parent.colordialogmousedown('%22%2Bcolorlist%5Bi%5D%2B%22')%5C%22%20align%3D%5C%22center%5C%22%20valign%3D%5C%22middle%5C%22%3E%3Ctable%20style%3D%5C%22%20border%3A1px%20solid%20%23808080%3B%5C%22%20width%3D%5C%2212%5C%22%20height%3D%5C%2212%5C%22%20bgcolor%3D%5C%22%22%2Bcolorlist%5Bi%5D%2B%22%5C%22%3E%3Ctr%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%3C%2Ftd%3E%22%3B%20%0D%0Aif(i%256%3D%3D5)%20%0D%0Aocbody%20%2B%3D%20%22%3C%2Ftr%3E%22%3B%20%0D%0A%7D%20%0D%0Aocbody%20%2B%3D%20%22%3C%2Ftable%3E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0AoPopBody.innerHTML%3Docbody%3B%20%0D%0A%0D%0Aif%20(baseText%20%3D%3D%20null)%20%0D%0A%20%20%20%20baseText%20%3D%20oPopBody.innerHTML%3B%20%0D%0A%20%20%20%20oPopBody.innerHTML%20%3D%20baseText%20%3B%20%0D%0A%20%20%20%20%20oPopBody.style.visibility%20%3D%20%22visible%22%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0Afunction%20hidePopup()%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20popUp%20%3D%20document.getElementById(%22popupcontent%22)%3B%20%0D%0A%20%20%20%20popUp.style.visibility%20%3D%20%22hidden%22%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
</head> 
<body> 
<div id="container"> 
<input type="text" value="" name="neon_color" id="neon_color" onkeydown="colordialog(event)" onmousedown="colordialog(event)" onfocus="colordialog(event)">

<div id="popupcontent"></div> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程