首页 > 网络编程 > JavaScript > javascript技巧 > DIV完美模拟createPopup 弹出窗口

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

2009-09-11 00:40:31 作者：

最近要重构公司的一个站，有一个拾色器只支持IE，不支持FIREFOX CHROME等浏览器，花了点时间对照原来的重写了个。完美实现createPopup方法的弹窗效果，欢迎大家拍砖！

补增一个效果图！

<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> 
<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; 
}

} 
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(); 
}

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></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\" font-size:12px;\" align=\"center\">当前颜色</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";

}

function hidePopup() 
{ 
    var popUp = document.getElementById("popupcontent"); 
    popUp.style.visibility = "hidden"; 
} 
// --></script> 
</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需刷新才能执行]

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

您可能感兴趣的文章: