Message prompts like MSN

Last Update:2018-12-06 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

(Test.htmlCode:

<HTML>
<Head>
<Title> soubao </title>
<SCRIPT src = "Popup. js" type = "text/JavaScript"> </SCRIPT>
<Script language = "JavaScript">
Function checkinfo ()
{
// Width: 200, height: 120, Title: soubei.com background message prompt:, message: the background message is added. Go and check it out.
VaR msg1 = new class_msn_message ("AA", 200,120, "soubao.com background message prompt:", "you have 1 message", "invite me to dinner today ");
// Display the prompt box
Msg1.rect (null, screen. Height-50 );
Msg1.speed = 20;
Msg1.step = 5;
Msg1.show ();
}
</SCRIPT>
</Head>
<Body ms_positioning = "flowlayout" onLoad = "checkinfo ();">
<Form ID = "form1" method = "Post" runat = "server">
</Form>
</Body>
</Html>
(2) Popup. js code:

(Note: js code can be modified only a small part by referring to Mr. Hill)

/*
** ===================================================== ========================================================== ================================
** Class Name: class_msn_message
** Function: provides message boxes similar to MSN.
** Example:
VaR MSG = new class_msn_message ("AA", 200,120, "Short Message prompt:", "you have 1 message", "invite me to dinner today ");
MSG. Show ();
** ===================================================== ========================================================== ================================
**/

/*
* 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 = 150;
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;
}

/*
* Message hiding 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)
{
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 uninstallation 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 ()
{
// Alert ("OK ");
This. Hide ();
}

/*
* 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 = # cedbf3 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 = middle width = '000000'> "+ this. caption + "</TD>"
STR + = "<TD style = 'padding-Right: 2px; padding-top: 2px 'valign = middle 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 = true id = 'btcommand'> <font color = # ff0000> "+ this. message + "</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 );
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 ()
{
Window. clearinterval (Me. Timer );
Opopup. Hide ();
}

VaR btcommand = opopup.doc ument. getelementbyid ("btcommand ");
Btcommand. onclick = function ()
{
Me. oncommand ();
}
}

/*
** Speed Setting Method
**/
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)
{}
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More