Heim > Artikel > Web-Frontend > 用DIV完美模拟createPopup 弹出窗口(脚本之家修正版)，支持Firefox,ie,chrome_javascript技巧

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

WBOYOriginal: 2016-05-16 18:47:001897Durchsuche

补增一个效果图！
弹窗效果图

<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 bgcolor=\"eeeeee\" colspan=\"7\" style=\" font-size:12px;\" align=\"center\">当前颜色"; 
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>"; 
if(i%6==5) 
ocbody += ""; 
} 
ocbody += ""; 
         
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> 
 
 
<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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：用 Javascript 验证表单(form)中的单选(radio)值_表单特效Nächster Artikel：jquery tools系列 expose 学习_jquery

In Verbindung stehende Artikel

Mehr sehen