The realization of the MSN Popup Prompt window of Js + CSS

Css|js

MSN Prompt window is very classic, so we also do a JavaScript implementation, for everyone to entertain.

Gossip is not much to say, the JavaScript code is as follows:

Only JavaScript code is not enough, we also need CSS to define the style:

div#emsg{}{
Background-color: #c9d3f3;
Border-left: #a6b4cf 1px solid;
Border-right: #455690 1px solid;
Border-top: #a6b4cf 1px solid;
Border-bottom: #455690 1px solid;
Visibility:hidden;
width:199px;
height:97px;
Position:absolute;
z-index:99999;
left:0px;
}
Div#emsg Div.emsginner
{}{
Border-top: #ffffff 1px solid;
Border-left: #ffffff 1px solid;
Background-color: #cfdef4;
height:96px;
width:198px;
}
Div#emsginner DIV.HEAD{}{WIDTH:197PX}
Div.headleft{}{width:30px;float:left;}
div.headmiddle{}{
width:150px;
Text-align:center;
Float:left;
padding-top:2px;
Color:green;
Font-weight:bold
}
Div.headright{}{width:16;float:left;}
Div.headright img{}{
width:13px;
height:13px;
border:0px;
Cursor:hand;
margin:2px;
}
div.body{}{
height:82px;
Clear:both;
Border-right: #b9c9ef 1px solid;
padding:13px;
padding-top:1px;
Border-top: #728eb8 1px solid;
Border-left: #728eb8 1px solid;
Color: #1f336b;
Word-break:break-all;
Border-bottom: #b9c9ef 1px solid;
}
div.light{}{text-align:center;padding:5px 20px}
div.content{}{text-align:center;height:65px;padding-top:10px}

The above is all implementation code, we need to do the following two steps when using
1. We need to precede the body tag with the statement that loads the message.
document.write (' <sc ' + ' ript> ' + ' Emsg.createinstance ("Crescent Studio Tips", "<div align=left> New added mailbox login and map query two modules welcome you to add the use. </div> ");
document.write (' </s ')
document.write (' cript> ');
2. Also need to add emsg.onload () in the body's OnLoad event;

This is done, you can see the effect from my blog.

An interested friend can encapsulate it as a. NET control.

/**//*emsg*/
var divtop,divleft,divwidth,divheight,docheight,docwidth,i = 0;
var emsg = new Object ();
EMSG.LIGHTSRC = '.. /image/message/light.gif ';
EMSG.CLOSESRC = '.. /image/message/msgclose.gif ';
emsg.id = ' emsg ';
Emsg.obj = function () {return document.getElementById (emsg.id);};

Emsg.onload = function () {
try{
Divtop = parseint (Emsg.obj (). style.top,10);
Divleft = parseint (Emsg.obj (). style.left,10);
Divheight = parseint (Emsg.obj (). offsetheight,10);
Divwidth = parseint (Emsg.obj (). offsetwidth,10);
Docwidth = Document.body.clientWidth;
Docheight = Document.body.clientHeight;
Emsg.obj (). Style.top = parseint (document.body.scrolltop,10) + docheight + 10;
Emsg.obj (). Style.left = parseint (document.body.scrollleft,10) + docwidth-divwidth;
Emsg.obj (). style.visibility= "Visible";
Emsg.timer = Window.setinterval (emsg.move,1);
Hp.skin.onBeforChange = function () {
if (Emsg.obj ()) Emsg.obj (). Parentnode.removechild (Emsg.obj ());
};
}
catch (e) {}
};
Emsg.onresize = function () {
I+=1;
if (i>1000) emsg.close ();
try{
Divheight = parseint (Emsg.obj (). offsetheight,10);
Divwidth = parseint (Emsg.obj (). offsetwidth,10);
Docwidth = Document.body.clientWidth;
Docheight = Document.body.clientHeight;
Emsg.obj (). Style.top = Docheight-divheight + parseint (document.body.scrolltop,10);
Emsg.obj (). Style.left = Docwidth-divwidth + parseint (document.body.scrollleft,10);
}
catch (e) {}
};
Emsg.move = function () {
Try
{
if (parseint (Emsg.obj (). style.top,10) <= (docheight-divheight + parseint (document.body.scrolltop,10))
{
Window.clearinterval (Emsg.timer);
Emsg.timer = Window.setinterval (emsg.onresize,1);
}
Divtop = parseint (Emsg.obj (). style.top,10);
Emsg.obj (). style.top = divTop-1;
}
catch (e) {}
};
Emsg.close = function () {
Emsg.obj (). Parentnode.removechild (Emsg.obj ());
if (Emsg.timer) window.clearinterval (Emsg.timer);
};
Emsg.createinstance = function (titlehtml,bodyhtml) {
if (!titlehtml | |!bodyhtml) Throw ' must specify a value for titlehtml, you must specify a value for bodyhtml. ';
var odiv = document.createelement (' DIV ');
Odiv.id = emsg.id;
odiv.innerhtml = ' <div class= ' emsginner ' > '
+ ' <div class= ' head ' > '
+ ' <div class= ' headleft ' ></div> '
+ ' <div class= ' headmiddle ' > ' + titlehtml + ' </div> '
+ ' <div class= ' headright ' ></div> '
+ ' </div> '
+ ' <div class= ' body "oncontextmenu=" emsg.close (), return false, "title=" right button to close ">"
+ ' <div class= ' light ' ></div> '
+ ' <div class= ' content ' > '
+ bodyhtml
+ ' </div> '
+ ' </div> '
+ ' </div> ';
Document.body.appendChild (ODIV);
};

Window.onresize = emsg.onresize;