Bullet layer and automatic hiding in the lower right corner of javascript (self-written)

There will always be a need to prompt announcements in the lower right corner when writing a project. What we need to do is to use simpler code and better user experience. The market has many bullet layers, but the functions are not satisfactory. Next we will share with you the self-written content earlier and the auto-play layer of the application.

Layer-7 EXAMPLE:
 
The implementation code is as follows:

Css style:
Copy codeThe Code is as follows:
/* Notification prompt Layer */
. Msg_info {font-size: 12px; text-align: left; z-index: 100; position: absolute; display: none; bottom: 0; right: 0; overflow: hidden ;}
. Msg_info h3 {float: left; margin: 0px; height: 0px; width: 100%; color: # fff; height: 30px ;}
. Msg_info h3 span ,. msg_info h3 B ,. msg_info h3 em ,. msg_info small span ,. msg_info small B ,. msg_info small em {background-image: url (/img/msg_bg.png );}
. Msg_info h3 B,. msg_info h3 em,. msg_info small B,. msg_info small em {float: left; font-size: 1px; width: 6px; height: 30px ;}
. Msg_info h3 B {background-position: 0px 0px ;}
. Msg_info h3 em {background-position: 0px-32px ;}
. Msg_info h3 span {background-position: 0px-64px; float: left; line-height: 30px ;}
. Msg_info h3 span font {float: left; text-align: left; overflow: hidden; margin-left: 12px ;}
. Msg_info h3 span I {float: right; margin-right: 10px; cursor: pointer; font-style: normal ;}
. Message_content {float: left; color: #515F62; overflow: hidden; border-left: solid 1px # C2C2C2; background-color: # F1F2F7; margin-top:-1px; min-height: 145px; height: auto! Important; height: 145px ;}
. Message_content div {float: left; margin: 0px; padding: 10px 14px; height: 100%; position: relative ;}
. Message_content div p. message_txt {float: left; width: 100%; height: 80%; margin: 0px; padding: 0px; min-height: 60px ;}
. Message_content div I {float: left; font-style: normal; margin-top: 2px; text-align: right; position: fixed; bottom: 2px; right: 4px ;}
. Message_content B. bright {float: right; width: 1px; font-size: 1px; background-color: # C2C2C2; border-right: solid 1px #828282; height: 100% ;}
. Msg_info small {float: left; width: 100%; height: 5px; font-size: 5px ;}
. Msg_info small span {background-position: 0px-101px; height: 5px; float: left ;}
. Msg_info small B {height: 5px; background-position: 0px-96px ;}
. Msg_info small em {height: 5px; background-position: 0px-pixel PX; float: right ;}

Js section:

Customize the pop-up function in the lower right corner
Copy codeThe Code is as follows:
// Lower-right bullet Layer
Function Messager (){
This. layer = {'width': 200, 'height': 100 };
This. title = 'info ';
This. time = 4000;
This. anims = {'type': 'slide', 'speed': 600 };
This. timer1 = null;
This. isTiming = false;
This. obj_id = "msg _" + $ (document. body). find ('msg _ info'). length;

Var _ obj, _ title, _ anims, _ time;
_ Timer2 = null;
// Initialization
This. inits = function (title, text ){
_ Anims = this. anims;
_ Title = title;
Var _ html = '<div class = "msg_info' + this. obj_id + '"> ';
_ Html + = '_ Html + = '<B> </B> ';
_ Html + = '<span class = "msg_bg_middle"> ';
_ Html + = '<font>' + title + '</font> ';
_ Html + = '<I class = "message_close"> × </I> ';
_ Html + = '</span> ';
_ Html + = '<em> </em> ';
_ Html + = '_ Html + = '<div class = "message_content"> ';
_ Html + = '<div class = "msg_txt">' + text + '</div> ';
_ Html + = '<B class = "bright"> </B> ';
_ Html + = '</div> ';
_ Html + = '<small> <B> </B> <span class = "msg_bg_middle"> </span> <em> </small> ';
_ Html + = '</div> ';
$ (Document. body). prepend (_ html );

_ Obj = $ ("." + this. obj_id );
If ($. browser. msie ){
_Obj.css ('bottom ',-5 );
}
_Obj.css ('width', this. layer. width );
_Obj.find('.msg_bg_middle').css ('width', this. layer. width-12 );
_Obj.find('.message_content'}.css ('width', this. layer. width-2 );
_Obj.find('.msg_txt'0000.css ('width', this. layer. width-34 );
_ Obj. find (". message_close"). click (function (){
SetTimeout (function () {closeMsg () ;}, 1 );
});
_ Obj. hover (function (){
ClearTimeout (timer1 );
ClearInterval (_ timer2 );
_ Timer2 = timer1 = null;
}, Function (){
Timer1 = setTimeout (function () {closeMsg () ;},_ time * 1000 );
Timing (_ time * 1000 );
});
};
// Display
This. show = function (title, text, time ){
If (title = 0 |! Title) title = this. title;
This. inits (title, text );
If (time> = 0) this. time = time;

Switch (this. anims. type ){
Case 'slide': _ obj. slideDown (this. anims. speed); break;
Case 'fade ': _ obj. fadeIn (this. anims. speed); break;
Case 'show': _ obj. show (this. anims. speed); break;
Default: _ obj. slideDown (this. anims. speed); break;
}
This. rmmessage (this. time );
};
// Set the width and height
This. lays = function (width, height ){
If (width! = 0 & width) this. layer. width = width;
If (height! = 0 & height) this. layer. height = height;
};
// Display attributes
This. anim = function (type, speed ){
If (type! = 0 & type) this. anims. type = type;
If (speed! = 0 & speed ){
Switch (speed ){
Case 'low':; break;
Case 'save': this. anims. speed = 200; break;
Case 'normal': this. anims. speed = 400; break;
Default: this. anims. speed = speed; break;
}
}
};
// Layer deletion time
This. rmmessage = function (time ){
If (time> 0 ){
Timer1 = setTimeout (function () {closeMsg () ;}, time );
If (this. isTiming ){
Timing (time );
}
}
};
// Timing
Timing = function (time ){
_ Time = time/1000;
_ Timer2 = setInterval (function (){
_Obj.find('.msg_bg_middle'{.find('font'{.html (_ title + '[' + (-- _ time) + ']');
},1000 );
}
// Close the Layer
CloseMsg = function (){
Switch (_ anims. type ){
Case 'slide': _ obj. slideUp (_ anims. speed); break;
Case 'fade ': _ obj. fadeOut (_ anims. speed); break;
Case 'show': _ obj. hide (_ anims. speed); break;
Default: _ obj. slideUp (_ anims. speed); break;
}
SetTimeout (function () {_ obj. remove () ;}, _ anims. speed );
}
}

Example function:
Copy codeThe Code is as follows:
Var msg = '<p class = "message_txt"> currently,' + json. total + 'users to be reviewed are waiting for your review. </P> <I> '+ json. stadate +' </I> ';
Var msgDiv = new Messager ();
MsgDiv. isTiming = true;
MsgDiv. lays (300,180 );
MsgDiv. show ("user audit reminder", msg, 10000 );