这里有新鲜出炉的精品教程,程序狗速度看过来!
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>
来源: http://www.phperz.com/article/17/0720/286683.html