仿msn弹出窗口
msnMessage.js文件代碼：
?
Code??1?/**
??2?**????==================================================================================================??
??3?**????類名：msnMessage??
??4?**????功能：提供類似MSN消息框??
??5?**????示例：??
??6???????--------------------------------------------------------------------------------------------------?
??7???????var?MSG?=?new?msnMessage("aa",200,120,"短消息提示：","您有1封消息","今天請我吃飯哈");??
??8???????MSG.show();??
??9???
?10???????--------------------------------------------------------------------------------------------------?
?11?**????作者：juhnpen(在原作者ttyp的基礎(chǔ)上做了點改動)
?12?**????郵件：juhnpen@126.com(原作者信箱ttyp@21cn.com)
?13?**????日期：2008-10-13??
?14?**????==================================================================================================??
?15?**/??
?16?/**
?17?**????消息構(gòu)造??
?18?**/??
?19?function?msnMessage(id,width,height,caption,title,message,target,action)
?20?{
?21?????this.id?????=?id;??
?22?????this.title??=?title;??
?23?????this.caption=?caption;??
?24?????this.message=?message;??
?25?????this.target?=?target;??
?26?????this.action?=?action;??
?27?????this.width????=?width?width:200;??
?28?????this.height?=?height?height:120;??
?29?????this.timeout=?300;??
?30?????this.speed????=?20;?
?31?????this.step????=?1;?
?32?????this.right????=?screen.width?-1;??
?33?????this.bottom?=?screen.height;?
?34?????this.left????=?this.right?-?this.width;?
?35?????this.top????=?this.bottom?-?this.height;?
?36?????this.timer????=?0;?
?37?????this.pause????=?false;
?38?????this.close????=?false;
?39?????this.autoHide????=?true;
?40?}
?41?/**
?42?**????隱藏消息方法??
?43?**/??
?44?msnMessage.prototype.hide?=?function()
?45?{
?46?????if(this.onunload())
?47?????{??
?48?????????var?offset??=?this.height>this.bottom-this.top?this.height:this.bottom-this.top;?
?49?????????var?me??=?this;??
?50??
?51?????????if(this.timer>0)
?52?????????{???
?53?????????????window.clearInterval(me.timer);??
?54?????????}??
?55?????????var?fun?=?function()
?56?????????{??
?57?????????????if(me.pause==false||me.close)
?58?????????????{
?59?????????????????var?x??=?me.left;?
?60?????????????????var?y??=?0;?
?61?????????????????var?width?=?me.width;?
?62?????????????????var?height?=?0;?
?63?????????????????if(me.offset>0)
?64?????????????????{?
?65?????????????????????height?=?me.offset;?
?66?????????????????}?
?67??????
?68?????????????????y??=?me.bottom?-?height;?
?69??????
?70?????????????????if(y>=me.bottom)
?71?????????????????{?
?72?????????????????????window.clearInterval(me.timer);??
?73?????????????????????me.Pop.hide();??
?74?????????????????}?
?75?????????????????else?
?76?????????????????{?
?77?????????????????????me.offset?=?me.offset?-?me.step;??
?78?????????????????}?
?79?????????????????me.Pop.show(x,y,width,height);????
?80?????????????}?????????????
?81?????????}??
?82?????????this.timer?=?window.setInterval(fun,this.speed)??????
?83?????}??
?84?}
?85?/**
?86?**????消息卸載事件，可以重寫??
?87?**/???
?88?msnMessage.prototype.onunload?=?function()
?89?{
?90?????return?true;
?91?}
?92?/**??
?93?**????消息命令事件，要實現(xiàn)自己的連接，請重寫它??
?94?**??
?95?**/??
?96?msnMessage.prototype.oncommand?=?function()
?97?{
?98?????this.close?=?true;
?99?????this.hide();?
100?????window.open(this.target);
101?}
102?/**
103?**????消息顯示方法??
104?**/?
105?msnMessage.prototype.show=function()
106?{
107?????var?oPopup?=?window.createPopup();?//IE5.5+??
108?????this.Pop?=?oPopup;??
109?????var?w?=?this.width;??
110?????var?h?=?this.height;??
111?????var?str?=?"<DIV?style='BORDER-RIGHT:?#455690?1px?solid;?BORDER-TOP:?#a6b4cf?1px?solid;?Z-INDEX:?99999;?LEFT:?0px;?BORDER-LEFT:?#a6b4cf?1px?solid;?WIDTH:?"?+?w?+?"px;?BORDER-BOTTOM:?#455690?1px?solid;?POSITION:?absolute;?TOP:?0px;?HEIGHT:?"?+?h?+?"px;?BACKGROUND-COLOR:?#c9d3f3'>";
112?????str?+=?"<TABLE?style='BORDER-TOP:?#ffffff?1px?solid;?BORDER-LEFT:?#ffffff?1px?solid'?cellSpacing=0?cellPadding=0?width='100%'?bgColor=#cfdef4?border=0>";????
113?????str?+=?"<TR>";
114?????str?+=?"<TD?style='FONT-SIZE:?12px;COLOR:?#0f2c8c'?width=30?height=24></TD>";??
115?????str?+=?"<TD?style='PADDING-LEFT:?4px;?FONT-WEIGHT:?normal;?FONT-SIZE:?12px;?COLOR:?#1f336b;?PADDING-TOP:?4px'?vAlign=center?width='100%'>"?+?this.caption?+?"</TD>";??
116?????str?+=?"<TD?style='PADDING-RIGHT:?2px;?PADDING-TOP:?2px'?vAlign=center?align=right?width=19>";??
117?????str?+=?"<SPAN?title=關(guān)閉?style='FONT-WEIGHT:?bold;?FONT-SIZE:?12px;?CURSOR:?hand;?COLOR:?red;?MARGIN-RIGHT:?4px'?id='btSysClose'?>×</SPAN></TD>";??
118?????str?+=?"</TR>";??
119?????str?+=?"<TR>";??
120?????str?+=?"<TD?style='PADDING-RIGHT:?1px;PADDING-BOTTOM:?1px'?colSpan=3?height="?+?(h-28)?+?">";??
121?????str?+=?"<DIV?style='BORDER-RIGHT:?#b9c9ef?1px?solid;?PADDING-RIGHT:?8px;?BORDER-TOP:?#728eb8?1px?solid;?PADDING-LEFT:?8px;?FONT-SIZE:?12px;?PADDING-BOTTOM:?8px;?BORDER-LEFT:?#728eb8?1px?solid;?WIDTH:?100%;?COLOR:?#1f336b;?PADDING-TOP:?8px;?BORDER-BOTTOM:?#b9c9ef?1px?solid;?HEIGHT:?100%'>"?+?this.title?+?"<BR><BR>";??
122?????str?+=?"<DIV?style='WORD-BREAK:?break-all'?align=left><A?href='javascript:void(0)'?hidefocus=true?id='btCommand'><FONT?color=#ff0000>"?+?this.message?+?"</FONT></A></DIV>";??
123?????str?+=?"</DIV>";??
124?????str?+=?"</TD>";??
125?????str?+=?"</TR>"??
126?????str?+=?"</TABLE>";??
127?????str?+=?"</DIV>";??
128?????oPopup.document.body.innerHTML?=?str;?
129?????this.offset??=?0;?
130?????var?me??=?this;??
131?????oPopup.document.body.onmouseover?=?function(){me.pause=true;}
132?????oPopup.document.body.onmouseout?=?function(){me.pause=false;}
133?????var?fun?=?function()
134?????{??
135?????????var?x??=?me.left;?
136?????????var?y??=?0;?
137?????????var?width????=?me.width;?
138?????????var?height????=?me.height;?
139?????????if(me.offset>me.height)
140?????????{?
141?????????????height?=?me.height;?
142?????????}?
143?????????else
144?????????{?
145?????????????height?=?me.offset;?
146?????????}?
147?????????y??=?me.bottom?-?me.offset;?
148?????????if(y<=me.top)
149?????????{?
150?????????????me.timeout--;?
151?????????????if(me.timeout==0)
152?????????????{?
153?????????????????window.clearInterval(me.timer);??
154?????????????????if(me.autoHide)
155?????????????????{
156?????????????????????me.hide();?
157?????????????????}
158?????????????}?
159?????????}?
160?????????else?
161?????????{?
162?????????????me.offset?=?me.offset?+?me.step;?
163?????????}?
164?????????me.Pop.show(x,y,width,height);????
165?????}????
166?????this.timer?=?window.setInterval(fun,this.speed)??????
167?????var?btClose?=?oPopup.document.getElementById("btSysClose");??
168?????btClose.onclick?=?function()
169?????{??
170?????????me.close?=?true;
171?????????me.hide();??
172?????}??
173?????var?btCommand?=?oPopup.document.getElementById("btCommand");??
174?????btCommand.onclick?=?function()
175?????{??
176?????????me.oncommand();??
177?????}????
178?}
179?/**
180?**?設(shè)置速度方法?
181?**/?
182?msnMessage.prototype.speed?=?function(s)
183?{
184?????var?t?=?20;?
185?????try?
186?????{?
187?????????t?=?praseInt(s);?
188?????}?
189?????catch(e)
190?????{}?
191?????this.speed?=?t;?
192?}
193?/**//*?
194?**?設(shè)置步長方法?
195?**/?
196?msnMessage.prototype.step?=?function(s)
197?{
198?????var?t?=?1;?
199?????try?
200?????{?
201?????????t?=?praseInt(s);?
202?????}?
203?????catch(e)
204?????{}?
205?????this.step?=?t;?
206?}
207?msnMessage.prototype.rect?=?function(left,right,top,bottom)
208?{
209?????try?{?
210?????????this.left???=?left???!=?null?left:this.right-this.width;?
211?????????this.right??=?right??!=?null?right:this.left?+this.width;?
212?????????this.bottom?=?bottom?!=null?(bottom>screen.height?screen.height:bottom):screen.height;?
213?????????this.top????=?top????!=null?top:this.bottom?-?this.height;?
214?????}?
215?????catch(e)
216?????{}?
217?}
218?
?
調(diào)用代碼：
?
Code<script?language="javascript"?type="text/javascript">
var?msg1?=?new?msnMessage("aa",200,120,"短消息提示：","您有1封消息","今天請我吃飯哈","11.htm");??
msg1.rect(null,null,null,screen.height-50);
msg1.speed?=?10;
msg1.step?=?5;?
//alert(msg1.top);?
msg1.show();??
//同時兩個有閃爍，只能用層代替了，不過層不跨框架?
var?msg2?=?new?msnMessage("aa",200,120,"短消息提示：","您有2封消息","好的啊","22.htm");??
msg2.rect(100,null,null,screen.height);?
msg2.show();??
</script>
?
注意：如果是在asp.net中，js文件中包含的字符通過innerHTML輸出后會顯示亂碼，作如下改動：
1.Web.config中加入 <system.web> <globalization requestEncoding="utf-8" responseEncoding="utf-8" /> </system.web>
2.Aspx頁面文件中加入
<META http-equiv="content-type" content="text/html; charset=gb2312">
3.在頁面加載事件中加入下句：
Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312");
原因是如果js寫在asp.net中，一般是不會出現(xiàn)亂碼的問題。因為他們具有相同的編碼。如果需要引用外部的javascript代碼就會有亂碼的風(fēng)險了。一般情況下Asp.net和Javascript的頁面編碼不是GB2312就是Utf-8 ，如果兩者的編碼不一致就會產(chǎn)生亂碼。解決方法就是想兩者的編碼進行統(tǒng)一。由于一般情況下Asp.net接受發(fā)送請求的編碼是Utf-8的，javascript編碼默認(rèn)是Gb2312，故容易出現(xiàn)問題。
轉(zhuǎn)載于:https://www.cnblogs.com/juhnpen/archive/2008/10/13/1309637.html
總結(jié)
- 上一篇： SpringBoot-短信验证码-快速入
- 下一篇： 2.2物理层传输介质