javascript弹出层效果

javascript弹出层效果

<script language="javascript">
function getEvent() //同时兼容ie和ff的写法
{
if(document.all)   return window.event;
func=getEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{
return arg0;
}
}
funcfunc=func.caller;
}
return null;
}
//t是标题，msg是需要显示在窗口中的信息或者HTML代码
function drag_window(t,msg,w,h,x,y)
{
var top=y,left=x;
var moveable=false;
var msgw,msgh,titleheight,bordercolor;
msgw=w;//窗口的宽度
msgh=h;//窗口的高度
titleheight=18 //提示窗口标题高度
bordercolor="#336699";//提示窗口的边框颜色

t = "<span style='float:left'>"+t+"</span>";

var msgObj=document.createElement("div");
msgObj.setAttribute("id","msgDiv");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = left + "px";
msgObj.style.top = top + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.zIndex = "1000";

var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height=titleheight+"px";
ttitle.innerHTML = t;

var msgdiv = document.createElement("div");
msgdiv.setAttribute("id","msg_content");
msgmsgdiv.innerHTML = msg;

var close_button=document.createElement("span");
close_button.setAttribute("id","msgClose");
close_button.style.padding="2px";
close_button.style.border="1px outset " ;
//close_button.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
close_button.style.color="white";
close_button.style.cursor="pointer";
close_button.innerHTML = "关闭";

close_button.onclick=function()
{
document.getElementById("msgTitle").removeChild(close_button);
document.getElementById("msgDiv").removeChild(title);
document.getElementById("msgDiv").removeChild(msgdiv);
document.body.removeChild(msgObj);
}

title.onmousedown=function()
{
var e = getEvent();
if (document.all)
{
document.getElementById("msgTitle").setCapture();
}
else
{
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
document.getElementById("msgTitle").style.cursor="move";
x = document.all?e.clientX:e.pageX;
y = document.all?e.clientY:e.pageY;
left = parseInt(document.getElementById("msgDiv").style.left);
top = parseInt(document.getElementById("msgDiv").style.top);
moveable = true;
document.onmousemove=function()
{
if(moveable)
{
var e = getEvent();
var chat_window = document.getElementById("msgDiv");
var newleft = left + (document.all?e.clientX:e.pageX) - x;
var maxleft = (parseInt(document.body.clientWidth)-parseInt(chat_window.style.width));
var newtop = top + (document.all?e.clientY:e.pageY) - y;
var maxtop = (parseInt(document.body.clientHeight) - parseInt(chat_window.style.height));
chat_window.style.left = (newleft>0&<maxleft?newleft:(newleft>0?maxleft:0)) + "px";
chat_window.style.top = (newtop>0&<maxtop?newtop:(newtop>0?maxtop:0)) + "px";
}
};
document.onmouseup=function()
{
if(moveable)
{
if (document.all)
{
document.getElementById("msgTitle").releaseCapture();
}
else
{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
document.getElementById("msgTitle").style.cursor="default";
moveable = false;
}
};
};
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
document.getElementById("msgTitle").appendChild(close_button);
document.getElementById("msgDiv").appendChild(msgdiv);
}</script>
<a href="#" onClick="drag_window('test','this is a demo for test',500,200,300,100)">创建一个可拖动层</a>
<pre>
说明：drah_window(t,msg)
参数：
t 代表创建的窗口的标题
msg 代表窗口主体将要显示的内容，也可以为HTML代码
w 代表窗口宽度
h 代表窗口高度
x,y 代表窗口弹出时初始位置

</pre>