Similar to the pop-up layer of QQ messages

Http://blog.163.com/hejianlong.123/blog/static/2671583920097145710497/

 

<SCRIPT type = "text/JavaScript">
// Message structure
Function class_msn_message (ID, width, height, caption, title, message, target, Action ){
This. ID = ID;
This. Title = title;
This. Caption = Caption;
This. Message = message;
This.tar get = target;
This. Action = action;
This. width = width? Width: 200;
This. Height = height? Height: 120;
This. Timeout = 200;
This. speed = 20;
This. Step = 1;
This. Right = screen. Width-1;
This. Bottom = screen. height;
This. Left = this. Right-This. width;
This. Top = This. Bottom-This. height;
This. Timer = 0;
This. Pause = false;
This. Close = false;
This. autohide = true;
}
// Hide the message method
Class_msn_message.prototype.hide = function (){
If (this. onUnload ()){
VaR offset = This. Height> This. bottom-this.top? This. Height: This. bottom-this.top;
VaR me = this;

If (this. Timer> 0 ){
Window. clearinterval (Me. Timer );
}

VaR fun = function (){
If (Me. Pause = false | me. Close ){
VaR x = me. Left;
Var y = 0;
VaR width = me. width;
VaR Height = 0;
If (Me. Offset> 0 ){
Height = me. offset;
}

Y = me. Bottom-height;

If (Y> = me. Bottom ){
Window. clearinterval (Me. Timer );
Me. Pop. Hide ();
} Else {
Me. offset = me. offset-Me. step;
}
Me. Pop. Show (X, Y, width, height );
}
}

This. Timer = Window. setinterval (fun, this. Speed)
}
}
// Message unload event, which can be rewritten
Class_msn_message.prototype.onunload = function (){
Return true;
}
// Message command event. to implement your own connection, rewrite it.
Class_msn_message.prototype.oncommand = function (){
// This. Close = true;
This. Hide ();
Window. Open ("filemg/message. aspx ");

}
// Message Display Method
Class_msn_message.prototype.show = function (){

VaR opopup = Window. createpopup (); // ie5.5 +
This. Pop = opopup;
VaR W = This. width;
VaR H = This. height;

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 '>"
STR + = "<Table Style = 'border-top: # ffffff 1px solid; border-left: # ffffff 1px solid 'cellspacing = 0 cellpadding = 0 width = '000000' bgcolor = # cfdef4 border = 0>"
STR + = "<tr>"
STR + = "<TD style = 'font-size: 12px; color: # 0f2c8c' width = 30 Height = 24> </TD>"
STR + = "<TD style = 'padding-left: 4px; font-weight: normal; font-size: 12px; color: # 1f336b; padding-top: 4px 'valign = center width = '000000'> "+ this. caption + "</TD>"
STR + = "<TD style = 'padding-Right: 2px; padding-top: 2px 'valign = center align = right width = 19>"
STR + = "<span Title = close style = 'font-weight: bold; font-size: 12px; cursor: hand; color: red; margin-right: 4px 'id = 'btsysclose'> × </span> </TD>"
STR + = "</tr>"
STR + = "<tr>"
STR + = "<TD style = 'padding-Right: 1px; padding-bottom: 1px 'colspan = 3 Height =" + (h-28) + ">"
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>"
STR + = "<Div style = 'word-break: Break-all 'align = left> <a href = 'javascript: void (0) 'hidefocus = false ID = 'btcommand'> <font color = # ff0000> "+ this. message + "</font> </a>-<a href = 'filemg/message. aspx 'target = 'main _ name' hidefocus = false ID = 'ommand '> <font color = # ff0000> View </font> </a> </div>"
STR + = "</div>"
STR + = "</TD>"
STR + = "</tr>"
STR + = "</table>"
STR + = "</div>"

Opopup.doc ument. Body. innerhtml = STR;

This. offset = 0;
VaR me = this;

Opopup.doc ument. Body. onmouseover = function () {me. Pause = true ;}
Opopup.doc ument. Body. onmouseout = function () {me. Pause = false ;}

VaR fun = function (){
VaR x = me. Left;
Var y = 0;
VaR width = me. width;
VaR Height = me. height;

If (Me. Offset> me. Height ){
Height = me. height;
} Else {
Height = me. offset;
}

Y = me. Bottom-Me. offset;
If (Y <= me. Top ){
Me. Timeout --;
If (Me. Timeout = 0 ){
Window. clearinterval (Me. Timer );
If (Me. autohide ){
Me. Hide ();
}
}
} Else {
Me. offset = me. Offset + me. Step;
}
Me. Pop. Show (X, Y, width, height );
}

This. Timer = Window. setinterval (fun, this. Speed)
VaR btclose = opopup.doc ument. getelementbyid ("btsysclose ");

Btclose. onclick = function (){
Me. Close = true;
Me. Hide ();
}

VaR btcommand = opopup.doc ument. getelementbyid ("btcommand ");
Btcommand. onclick = function (){
Me. oncommand ();
}
VaR ommand = opopup.doc ument. getelementbyid ("ommand ");
Ommand. onclick = function (){
Me. Hide ();
Window. Open (ommand. href );
}
}
// Set the speed
Class_msn_message.prototype.speed = function (s ){
VaR T = 20;
Try {
T = praseint (s );
} Catch (e ){}
This. speed = T;
}
// Step size setting method
Class_msn_message.prototype.step = function (s ){
VaR T = 1;
Try {
T = praseint (s );
} Catch (e ){}
This. Step = T;
}

Class_msn_message.prototype.rect = function (left, right, top, bottom ){
Try {
This. Left = left! = NULL? Left: This. right-this.width;
This. Right = right! = NULL? Right: This. Left + this. width;
This. Bottom = bottom! = NULL? (Bottom> screen. Height? Screen. Height: Bottom): screen. height;
This. Top = Top! = NULL? Top: This. Bottom-This. height;
} Catch (e ){}
}

VaR msg1 = new class_msn_message ("AA", 200,120, "Short Message prompt:", "you have 1 message", "tip ");
Msg1.rect (null, screen. Height-50 );
Msg1.speed = 10;
Msg1.step = 2;
// Alert (msg1.top );
Msg1.show ();
</SCRIPT>