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

ttx9n · 发表于 2009-9-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> 
 
<input type="text" value="" name="neon_color" id="neon_color" onkeydown="colordialog(event)" onmousedown="colordialog(event)" onfocus="colordialog(event)">

</body> 
</html>

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

64000928 · 发表于 2022-9-11 18:20:34

啦啦啦啦啦啦啦啦！

lsc54 · 发表于 2022-11-9 01:05:14

呵呵呵呵呵呵

64000928 · 发表于 2022-12-7 20:59:52

啦啦啦啦啦德玛西亚

errol123 · 发表于 2023-2-2 02:19:03

抽根烟，下来看看再说

sykzus · 发表于 2023-8-21 01:59:23

啊啊啊啊啊啊啊啊啊啊啊啊啊啊

kwa3hgmjp · 发表于 2023-10-20 16:31:07

好东西可以可以可以可以

gc4hg · 发表于 2024-3-15 05:54:55

我要金豆金豆金豆

wqpa63gz · 发表于 2024-4-13 11:18:03

了乐趣了去了去了去了去了

0608fv3 · 发表于 2024-6-26 04:45:18

看看看咋么

账号		自动登录	找回密码
密码			立即注册

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

相关帖子