这是蓝色某网友的代码,这段代码实现一个类似163邮箱对话框的效果,但发现在ff下无法正常运行,偶看了下代码然后对代码进行了修改,最终在ff 和 ie下实现了相同的效果。
下面是修改后的代码：
<!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></title>
</head>
<body>
<script type="text/javascript">
//获取ID
function $id(id){
return document.getElementById(id);
}
function ShowMsg(){
document.writeln("<div id=\"msgdiv\" style=\"position:absolute;display:none;border:2px solid #AFCEF9;\"><\/div>");
document.writeln("<div id=\"overdiv\" style=\"position:absolute;display:none;\">");
document.writeln("<\/div>");
this.show=function(msgtitle,msgcontent,selecttype){
var tempobj1=$id("msgdiv");
var tempobj2=$id("overdiv");
tempobj2.style.filter="alpha(opacity=30)";
tempobj2.style.MozOpacity = 30/100;
tempobj2.style.backgroundColor = "#000000";
tempobj2.style.display = '';
tempobj2.style.zIndex= 100;
tempobj2.style.height= screen.availHeight+"px";
tempobj2.style.width= screen.availWidth+"px";
tempobj2.style.left=0;
tempobj2.style.top=0;
tempobj1.style.display="none";
tempobj1.style.left= (document.documentElement.clientWidth)/3+"px";
tempobj1.style.top= (document.documentElement.scrollTop+(document.documentElement.clientHeight)/3)+"px";
tempobj1.style.display= '';
tempobj1.style.width=400+"px";
tempobj1.style.height=300+"px";
tempobj1.style.zIndex= 200;
tempobj1.style.backgroundColor = "#CDDAF1";
var OutStr;
OutStr="<div style=\"font-weight:bolder;text-align:center;height:20px;font-size:14px;background-color:#6088D2;cursor:move\" canmove=\"true\" forid=\"msgdiv\">"+msgtitle+"</div>"
OutStr=OutStr+"<div style=\"height:200px;text-align:center;font-size:12px;\">"+msgcontent+"</div>"
if(selecttype==1){
OutStr=OutStr+"<div style=\"text-align:center;font-size:12px;\"><input type=\"button\" value=\"确定\" onclick=\"ShowMsgo.resertwindow()\"> <input type=\"button\" value=\"取消\" onclick=\"ShowMsgo.resertwindow()\"></div>"
}else if(selecttype==2){
OutStr=OutStr+"<div style=\"text-align:center;font-size:12px;\"><input type=\"button\" value=\"确定\" onclick=\"ShowMsgo.resertwindow()\"></div>"
}
tempobj1.innerHTML=OutStr;
var md=false,mobj,ox,oy
document.onmousedown=function(ev){
var ev=ev||window.event;
var evt=ev.srcElement||ev.target;
if(typeof(evt.getAttribute("canmove"))=="undefined"){
return;
}
if(evt.getAttribute("canmove")){
md = true;
mobj = document.getElementById(evt.getAttribute("forid"));
ox = mobj.offsetLeft - ev.clientX;
oy = mobj.offsetTop - ev.clientY;
}
}
document.onmouseup= function(){md=false;}
document.onmousemove= function(ev){
var ev=ev||window.event;
if(md){
mobj.style.left= (ev.clientX + ox)+"px";
mobj.style.top= (ev.clientY + oy)+"px";
}
}
}
this.resertwindow=function(){
$id('msgdiv').style.display='none';
$id('overdiv').style.display='none';
}
}
var ShowMsgo=new ShowMsg();
</script>
<a href="#" onClick="ShowMsgo.show('test','test',1)">Test1</a>
<a href="#" onClick="ShowMsgo.show('test','test',2)">Test2</a>
<p>fasdfads</p>
<p>fasdfads</p>
<p>fasdfads</p>
<p>fasdfads</p>
<p>fasdfads</p>
</body>
</html>
改完代码，有以下几点需要总结：
- 每个长度都要加上单位,否则长度值无效,如tempobj2.style.height= screen.height;无效,应该写成tempobj2.style.height= screen.height+"px";。
- ff下window对象没有event属性,应该从参数来获取,如function xxx(ev){var ev=ev||window.event;},此外,event也没有srcelement属性,应该使用target来代替.如var evt=ev.srcElement||ev.target;。
- ff下获取鼠标指针的位置应该使用clientX/clientY或pageX/pageY来获取，在ie和ff下通用的方法是clientX/clientY。
- ff下获取用户自定义的属性应该使用getAttribute方法来获取。而不能直接使用点号获取。