求一个类似于MSN消息弹出效果的JS脚本
RT~前天慕白兄给了个类似的东西，但是右下角弹出的消息窗口没有关闭键，而且鼠标点击其他地方的话窗口就会消失掉。
要求的效果是：
点击窗口的其他地方，消息窗口不变。
窗口的右上角有个叉叉，用于关闭窗口。
各位高手~~请赐教啦~~
--------------------编程问答-------------------- http://blog.csdn.net/Eray/archive/2007/06/18/1656489.aspx --------------------编程问答-------------------- <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Keywords" content="51windows.Net">
<META NAME="Author" CONTENT="haiwa">
<title>类似MSN提示的页面效果</title>
</head>
<body width=2000>
<script language="JavaScript">
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
try
{
divTop = parseInt(document.getElementById("eMeng").style.top,10)
divLeft = parseInt(document.getElementById("eMeng").style.left,10)
divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
document.getElementById("eMeng").style.visibility="visible"
objTimer = window.setInterval("moveDiv()",10)
}
catch(e){}
}
function resizeDiv()
{
i+=1
if(i>500) closeDiv()
try
{
divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
}
catch(e)
{
}
}
function moveDiv()
{
try
{
if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
{
window.clearInterval(objTimer)
objTimer = window.setInterval("resizeDiv()",1)
}
divTop = parseInt(document.getElementById("eMeng").style.top,10)
document.getElementById("eMeng").style.top = divTop - 1
}
catch(e){}
}
function closeDiv()
{
document.getElementById('eMeng').style.visibility='hidden';
if(objTimer) window.clearInterval(objTimer)
}
</script>
<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
<TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24></TD>
<TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" vAlign=center width="100%"> 短消息提示：</TD>
<TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" vAlign=center align=right width=19><span title=关闭 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span><!-- <IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg"> --></TD>
</TR>
<TR>
<TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=3 height=90>
<DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有<font color=#FF0000>1</font>封新短消息<BR><BR>
<DIV align=center style="word-break:break-all"><a href="http://www.google.com"><font color=#FF0000>google</font></a></DIV>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</body>
</html> --------------------编程问答-------------------- MSN:huifeng801@hotmail.com!发个邮件给我 我发给你！就一张页面一个JS --------------------编程问答-------------------- var Message = new Object();
Message.IsDraw = false;
Message.Max = 100;
Message.Top = -100;
Message.Step = 2;
Message.IsDown = true;
Message.IsComplete = false;
Message.Timer = 0;
Message.Last = 0;
Message.Current = null;
Message.ValidationForm = null;
var specialCharacters_pattern="^([^\,^\;^\"^\'^\/^\>^\<])*$";
Message.Move = function()
{
if(Message.IsDraw)
{
if((!Message.IsDown && Message.Top > -Message.Max) || (Message.IsDown && Message.Top < 0))
{
var nStep = Message.IsDown ? Message.Step:-Message.Step;
Message.Top += nStep;
MessageLayer.style.top = window.document.body.scrollTop + Message.Top;
}
else
{
clearInterval(Message.Timer);
Message.IsComplete = true;
// check is down
if(Message.IsDown)
{
clearTimeout(Message.Last);
Message.Last = setTimeout('Message.Close(1)', 20000);
}
}
}
}
Message.Fix = function()
{
if(Message.IsDraw && Message.IsComplete)
{
MessageLayer.style.top = window.document.body.scrollTop + Message.Top;
}
}
Message.Close = function(nType)
{
clearInterval(Message.Timer);
Message.IsDown = false;
Message.IsComplete = false;
Message.Timer = setInterval(Message.Move, 10);
// set focus
if(nType == undefined || nType != 1)
{
try { Message.Current.select(); }
catch(e) {}
}
}
Message.Show = function(sTitle, sMessage)
{
sTitle = unescape(sTitle);
sMessage = unescape(sMessage);
///////////////////////////////////////
if(sMessage.length > 100)
{
Message.Top = -sMessage.length;
Message.Max = sMessage.length;
}
///////////////////////////////////////
if(Message.IsDraw)
{
MessageTitle.innerHTML = "<span><font color=\"#FF0000\"><b>" + sTitle + "</b></font>";
MessageContent.innerHTML = sMessage;
// start
clearInterval(Message.Timer);
Message.IsDown = true;
Message.IsComplete = false;
Message.Current = null;
Message.Timer = setInterval(Message.Move, 10);
}
}
Message.Draw = function()
{
document.write(""
+ "<div id=\"MessageLayer\" width=\"100%\" style=\"Z-INDEX: 101; LEFT: 0px; POSITION: absolute; TOP: -150px\">"
+ "<table border=\"1\" cellpadding=\"0\" style=\"border-collapse: collapse\" width=\"100%\" bordercolor=\"#000000\" style=\"background-image:url(/images/message/bg.gif);background-repeat: repeat-x;background-color:white;background-position: bottom;\">"
+ "<tr>"
+ "<td>"
+ "<table border=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" width=\"100%\">"
+ "<tr>"
+ "<td width=\"200\" style=\"padding:5;padding-left:10;\" id=\"MessageTitle\" height=\"29\"><span><font color=\"#FF0000\"><b></b></font></span></td>"
+ "<td align=\"right\" style=\"padding-right:10;\"><a href=\"javascript:\" onclick=\"Message.Close()\"><img src=\"/images/message/close.gif\" border=\"0\">"
+ "</a></td>"
+ "</tr>"
+ "<tr>"
+ "<td id=\"MessageContent\" colspan=\"2\" style=\"padding-left:15;padding-right:10;padding-bottom:10;;word-break:break-all\" height=\"29\"></td>"
+ "</tr>"
+ "</table>"
+ "</td>"
+ "</tr>"
+ "</table>"
+ "<table border=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" width=\"100%\">"
+ "<tr><td colspan=\"2\" bgcolor=\"#808080\"></td></tr>"
+ "<tr><td colspan=\"2\" bgcolor=\"#C0C0C0\"></td></tr>"
+ "</table>"
+ "</div>");
Message.IsDraw = true;
setInterval(Message.Fix, 10);
}
Message.ValidateContrl = function(control)
{
if(control.m_title == null || control.m_title == undefined || control.m_message == null || control.m_message == undefined)
{
return true;
}
// check empty
if(control.m_empty == "true" && control.value == "")
{
return Message.ShowError(control);
}
// check number
if(control.m_number == "true" && !string.IsNumber(control.value))
{
return Message.ShowError(control);
}
// check length
if(string.IsNumber(control.m_length) && control.value.length > parseInt(control.m_length))
{
return Message.ShowError(control);
}
// check regex
if(control.m_pattern != null && control.m_pattern != undefined && control.m_pattern != "" && control.value != "")
{
var re = new RegExp(control.m_pattern);
if(re.exec(control.value) == null || control.value != re.exec(control.value)[0])
{
return Message.ShowError(control);
}
}
//检验特殊字符
if(control.m_check == "true")
{
var re = new RegExp(specialCharacters_pattern);
if(re.exec(control.value) == null || control.value != re.exec(control.value)[0] || control.value.indexOf("\\") != -1)
{
Message.Show(control.m_title, "不能包含特殊字符号[\\,/;'\":?><]");
Message.Current = control;
control.select();
return false;
}
}
return true;
}
Message.Validate = function(control)
{
try
{
if(Message.ValidationForm == null && control == null)
{
return true;
}
var child = (control == null) ? Message.ValidationForm.children : control.children;
for(var nPos = 0; nPos < child.length; nPos++)
{
var subControl = child[nPos];
if(Message.ValidateContrl(subControl) && Message.Validate(subControl))
{
continue;
}
return false;
}
return true;
}
catch(e) { return false; }
}
Message.ShowError = function(control)
{
try
{
Message.Show(control.m_title, control.m_message);
Message.Current = control;
control.select();
}
catch(e) {}
return false;
}
Message.isSupported = function()
{
if (typeof Message.isSupported.r == "boolean")
return Message.isSupported.r;
var ua = navigator.userAgent.toLowerCase();
var an = navigator.appName;
var r = false;
if (ua.indexOf("gecko") > -1) r = true;
else if (an == "Microsoft Internet Explorer")
{
if (document.getElementById) r = true;
}
Message.isSupported.r = r;
return r;
}
if(Message.isSupported())
{
Message.Draw();
} --------------------编程问答-------------------- 给你个地址，去下吧
download.csdn.net/sort/tag/popupwin --------------------编程问答-------------------- 有个空间 popupbox.dll 可以实现的 --------------------编程问答-------------------- <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Keywords" content="51windows.Net">
<META NAME="Author" CONTENT="haiwa">
<title>类似MSN提示的页面效果</title>
</head>
<body scroll=no>
看到右下角的提示了吗？如果没有看到，<button onclick=location.reload();>刷新</button>一下
<script language="JavaScript">
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
try{
divTop = parseInt(document.getElementById("eMeng").style.top,10)
divLeft = parseInt(document.getElementById("eMeng").style.left,10)
divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
document.getElementById("eMeng").style.visibility="visible"
objTimer = window.setInterval("moveDiv()",10)
}
catch(e){}
}
function resizeDiv()
{
i+=1
if(i>500) closeDiv()
try{
divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
}
catch(e){}
}
function moveDiv()
{
try
{
if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
{
window.clearInterval(objTimer)
objTimer = window.setInterval("resizeDiv()",1)
}
divTop = parseInt(document.getElementById("eMeng").style.top,10)
document.getElementById("eMeng").style.top = divTop - 1
}
catch(e){}
}
function closeDiv()
{
document.getElementById('eMeng').style.visibility='hidden';
if(objTimer) window.clearInterval(objTimer)
}
</script>
<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
<TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24></TD>
<TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" vAlign=center width="100%"> 短消息提示：</TD>
<TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" vAlign=center align=right width=19><span title=关闭 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span><!-- <IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg"> --></TD>
</TR>
<TR>
<TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=3 height=90>
<DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有<font color=#FF0000>1</font>封新短消息<BR><BR>
<DIV align=center style="word-break:break-all"><a href="javascript:alert('你好')"><font color=#FF0000>点击查看短信</font></a></DIV
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</body>
</html>
补充：.NET技术 , ASP.NET
