以前做过一个,但要在<body></body>中插入div,用起来很不方便,干脆做成了一个JS文件,
DIV通过document.body.insertBefore来插入.代码如下:
//自动消失的消息显示框
function MyMsgDiv()
{
this.msgDiv = null;
this.msgStyle = "FONT-SIZE:12px;LEFT:expression(this.offsetParent.scrollLeft+20);COLOR:#ffffff;LINE-HEIGHT:150%;POSITION:absolute;TOP:expression(this.offsetParent.scrollTop+10);BACKGROUND-COLOR:#7f1ef6;";
this.ffMsgStyle = "FONT-SIZE:12px;LEFT:20px;COLOR:#ffffff;LINE-HEIGHT:150%;POSITION:absolute;TOP:10px;BACKGROUND-COLOR:#7f1ef6;";
this.createDiv = function()
{
this.msgDiv = document.createElement("div");
if(window.XMLHttpRequest)
{
this.msgDiv.style.cssText = this.ffMsgStyle;
}
else
{
this.msgDiv.style.cssText = this.msgStyle;
}
document.body.insertBefore(this.msgDiv, document.body.childNodes[0]);
}
this.Show = function(msgstr)
{
this.msgDiv.innerHTML = " " + msgstr + " ";
}
this.createDiv(); //放置此处是为了防止以下的md值为null
var closetime;
var md = this.msgDiv;
this.Show = function(msg,showtime)
{
md.innerHTML =" "+msg+" ";
md.style.visibility = "visible";
if(closetime)window.clearTimeout(closetime);
closetime=setTimeout(this.Hidden,showtime*1000);
}
![](/Images/OutliningIndicators/InBlock.gif)
this.Hidden = function()
{
md.innerHTML = "";
md.style.visibility = "hidden";
}
}
function test()
{
var md = new MyMsgDiv();
md.Show("Hello, world!", 3);
}
DIV通过document.body.insertBefore来插入.代码如下:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
需要用到此功能的页面中,包含脚本文件,
然后建立一个MyMsgDiv实例,显示信息时再调用实例的Show方法即可:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)