JS实现DIV提示框的效果
多谢蓝色的84yemoo帮助做到FIREFOX下的兼容
代码如下:
<!
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.ok_callback=function()...{};
this.cancel_callback=function()...{};
this.msgobjname=""
this.show=function(msgtitle,msgcontent,selecttype)...{
var tempobj1=$id("msgdiv");
var tempobj2=$id("overdiv");
var msgobj=this.msgobjname;
tempobj2.style.filter="alpha(opacity=75)";
tempobj2.style.MozOpacity = 75/100;
tempobj2.style.backgroundColor = "#000000";
tempobj2.style.display = '';
tempobj2.style.zIndex= 100;
tempobj2.style.height= document.documentElement.clientHeight+"px";
tempobj2.style.width= document.documentElement.clientWidth+"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="确定" οnclick=""+msgobj+".ok()"> <input type="button" value="取消" οnclick=""+msgobj+".cancel()"></div>"
}
else if(selecttype==2)...{
OutStr=OutStr+"<div style="text-align:center;font-size:12px;"><input type="button" value="确定" οnclick=""+msgobj+".ok()"></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.ok = function()
...{
$id('msgdiv').style.display='none';
$id('overdiv').style.display='none';
this.ok_callback();
}
this.cancel=function()...{
$id('msgdiv').style.display='none';
$id('overdiv').style.display='none';
this.cancel_callback();
}
}
var ShowMsgo=new ShowMsg();
//设置对象名,供内部引用
ShowMsgo.msgobjname="ShowMsgo";
//定义回调函数
ShowMsgo.ok_callback=function()...{
alert("ok");
}
ShowMsgo.cancel_callback=function()...{
alert("cancel")
}
</ script >
< a href ="javascript:ShowMsgo.show('test','test',1)" > Test1 </ a >
< a href ="javascript:ShowMsgo.show('test','test',2)" > Test2 </ a >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
</ body >
</ html >
< 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.ok_callback=function()...{};
this.cancel_callback=function()...{};
this.msgobjname=""
this.show=function(msgtitle,msgcontent,selecttype)...{
var tempobj1=$id("msgdiv");
var tempobj2=$id("overdiv");
var msgobj=this.msgobjname;
tempobj2.style.filter="alpha(opacity=75)";
tempobj2.style.MozOpacity = 75/100;
tempobj2.style.backgroundColor = "#000000";
tempobj2.style.display = '';
tempobj2.style.zIndex= 100;
tempobj2.style.height= document.documentElement.clientHeight+"px";
tempobj2.style.width= document.documentElement.clientWidth+"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="确定" οnclick=""+msgobj+".ok()"> <input type="button" value="取消" οnclick=""+msgobj+".cancel()"></div>"
}
else if(selecttype==2)...{
OutStr=OutStr+"<div style="text-align:center;font-size:12px;"><input type="button" value="确定" οnclick=""+msgobj+".ok()"></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.ok = function()
...{
$id('msgdiv').style.display='none';
$id('overdiv').style.display='none';
this.ok_callback();
}
this.cancel=function()...{
$id('msgdiv').style.display='none';
$id('overdiv').style.display='none';
this.cancel_callback();
}
}
var ShowMsgo=new ShowMsg();
//设置对象名,供内部引用
ShowMsgo.msgobjname="ShowMsgo";
//定义回调函数
ShowMsgo.ok_callback=function()...{
alert("ok");
}
ShowMsgo.cancel_callback=function()...{
alert("cancel")
}
</ script >
< a href ="javascript:ShowMsgo.show('test','test',1)" > Test1 </ a >
< a href ="javascript:ShowMsgo.show('test','test',2)" > Test2 </ a >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
< p > fasdfads </ p >
</ body >
</ html >