信鸽网

用DIV完美模拟createPopup 弹出窗口()，支持Firefox,ie,chrome

  作者：bea

补增一个效果图！ <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
补增一个效果图！




<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 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>
</body>
</html>




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



有用  |  无用

猜你喜欢

您可能感兴趣的文章: