用DIV完美模拟createPopup 弹出窗口，支持Firefox,ie,chrome
发布于 2017-07-19 21:58:24 | 350 次阅读 | 评论: 0 | 来源: 网友投递
Firefox 浏览器
firefox 即 火狐浏览器 。Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。Firefox由Mozilla基金会与社区数百个志愿者以GPL/LGPL/MPL三种授权方式发布
最近要重构公司的一个站，有一个拾色器只支持IE，不支持FIREFOX CHROME等浏览器，花了点时间对照原来的重写了个。完美实现createPopup方法的弹窗效果，欢迎大家拍砖！
补增一个效果图！
<html>
<head>
<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></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>
<input type="text" value="" name="neon_color" id="neon_color" onkeydown="colordialog(event)" onmousedown="colordialog(event)" onfocus="colordialog(event)">
<!--
div尽量别放入table里，IE可能会解释出错
-->
<div></div>
</div>
</body>
</html>
推荐阅读
最新资讯