一個(gè)多瀏覽器支持的背景變暗的div并可拖動(dòng)提示窗口功能的代碼

2019-11-21 01:46:36

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>景變暗的div可拖動(dòng)提示窗口</title> <script language="javascript"> function alertWin(title, msg, w, h){      var titleheight = "22px"; // 提示窗口標(biāo)題高度      var bordercolor = "#666699"; // 提示窗口的邊框顏色      var titlecolor = "#FFFFFF"; // 提示窗口的標(biāo)題顏色      var titlebgcolor = "#666699"; // 提示窗口的標(biāo)題背景色     var bgcolor = "#FFFFFF"; // 提示內(nèi)容的背景色          var iWidth = document.documentElement.clientWidth;      var iHeight = document.documentElement.clientHeight;      var bgObj = document.createElement("div");      bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";     document.body.appendChild(bgObj);           var msgObj=document.createElement("div");     msgObj.style.cssText = "position:absolute;font:11px '宋體';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";     document.body.appendChild(msgObj);          var table = document.createElement("table");     msgObj.appendChild(table);     table.style.cssText = "margin:0px;border:0px;padding:0px;";     table.cellSpacing = 0;     var tr = table.insertRow(-1);     var titleBar = tr.insertCell(-1);     titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋體';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;     titleBar.style.paddingLeft = "10px";     titleBar.innerHTML = title;     var moveX = 0;     var moveY = 0;     var moveTop = 0;     var moveLeft = 0;     var moveable = false;     var docMouseMoveEvent = document.onmousemove;     var docMouseUpEvent = document.onmouseup;     titleBar.onmousedown = function() {         var evt = getEvent();         moveable = true;          moveX = evt.clientX;         moveY = evt.clientY;         moveTop = parseInt(msgObj.style.top);         moveLeft = parseInt(msgObj.style.left);                  document.onmousemove = function() {             if (moveable) {                 var evt = getEvent();                 var x = moveLeft + evt.clientX - moveX;                 var y = moveTop + evt.clientY - moveY;                 if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {                     msgObj.style.left = x + "px";                     msgObj.style.top = y + "px";                 }             }             };         document.onmouseup = function () {              if (moveable) {                  document.onmousemove = docMouseMoveEvent;                 document.onmouseup = docMouseUpEvent;                 moveable = false;                  moveX = 0;                 moveY = 0;                 moveTop = 0;                 moveLeft = 0;             }          };     }          var closeBtn = tr.insertCell(-1);     closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;     closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";     closeBtn.onclick = function(){          document.body.removeChild(bgObj);          document.body.removeChild(msgObj);      }      var msgBox = table.insertRow(-1).insertCell(-1);     msgBox.style.cssText = "font:10pt '宋體';";     msgBox.colSpan  = 2;     msgBox.innerHTML = msg;          // 獲得事件Event對(duì)象，用于兼容IE和FireFox     function getEvent() {         return window.event || arguments.callee.caller.arguments[0];     } }  </script> </head> <body> <input type="button" value="點(diǎn)這里" onclick="alertWin('標(biāo)題','這里是內(nèi)容',300,200);" /> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

IE7.0、Firefox2.0、Opera9.0測(cè)試通過(guò)
歡迎大家指教批評(píng)

前段時(shí)間一直在研究Js，網(wǎng)上有很多關(guān)于兼容瀏覽器方面的文章，給大家找了幾個(gè)：
http://blog.csdn.net/zqian1987/archive/2008/03/02/2140055.aspx
http://www.cnblogs.com/jacklong/archive/2008/01/10/1033954.html

下面寫(xiě)寫(xiě)我這段時(shí)間的一些心得，主要介紹兼容IE和FireFox方面，Opera9.0前的版本好像N多東西不支持，暫時(shí)不介紹，Opera9.0以后的版本在Javascript解釋方面和FireFox比較接近。
我介紹的都是一些細(xì)節(jié)方面的東西，側(cè)重于寫(xiě)一些不常見(jiàn)的情況，想到新的我會(huì)持續(xù)補(bǔ)充：
1、創(chuàng)建一個(gè)Element，通用的寫(xiě)法為createElement("div")
   IE中也可以這樣寫(xiě)createElement("<div style='color:#FFFFFF'>")，但Firefox不認(rèn)
2、IE中的width、height與Firefox中概念不同，IE中width=FireFox中的width+2*borderWidth+2*Padding
   參見(jiàn)：http://help.powereasy.net/Template/WEB/1557.html
3、動(dòng)態(tài)添加css代碼
cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createStyleSheet();
style.cssText = cssStr;FireFox：復(fù)制內(nèi)容到剪貼板代碼:
cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createElement("style");
style.type = "text/css";
style.innerHTML = cssStr;
win.document.getElementsByTagName("HEAD").item(0).appendChild(style); 4、table在后面添加加行或列，通用寫(xiě)法insertRow(-1),insertCell(-1)
   IE中insertRow(),insertCell()這樣寫(xiě)也可以，F(xiàn)irefox不認(rèn)
5、警告對(duì)話框alert()，IE中書(shū)寫(xiě)時(shí)無(wú)參數(shù)則默認(rèn)參數(shù)為空字符串，F(xiàn)irefox中則必須輸入?yún)?shù)，傳空參數(shù)則要寫(xiě)成alert("");
6、給element.style.width賦值必須寫(xiě)成24px，只寫(xiě)數(shù)字24的話，F(xiàn)ireFox會(huì)不認(rèn)，IE里都可以
7、在使用Element，并給其綁定了onclick、onmouseover、onmousedown、onmouseout等事件
    element.onclick = function() { alert("hello kitty"); };
   時(shí)，需注意
   將此元素添加到上級(jí)元素上時(shí)要用appendChild，不可以在上級(jí)中使用innerHTML操作，這樣會(huì)使事件無(wú)效

上一篇：javascript背投廣告代碼的完善

下一篇：能在網(wǎng)頁(yè)中寫(xiě)字和能擦寫(xiě)的js程序