Javascript bottom right corner of the layer and automatically hide of their own writing

There's always going to be a requirement in writing a project to have a notification in the bottom right corner, how to use simpler aspects, simpler code, better user experience and that's what we're going to do. The market has many layers, but the function is not satisfactory. Here's a look at the auto-bounce layer that I wrote earlier, and which is still in use.

Example diagram of missile layer:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311201516561.gif? 20131020151752 ">  
The implementation code is as follows:

Css styles:

 
 
.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 -106px; float: right;} 

Js:

Custom lower right corner of the elastic layer function

 
//Lower right corner of the shell layer
function Messager() { 
this.layer = { 'width': 200, 'height': 100 }; 
this.title = ' message '; 
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; 
//Initialize the
this.inits = function (title, text) { 
_anims = this.anims; 
_title = title; 
var _html = '<div class="msg_info ' + this.obj_id + '">'; 
_html += ' <h3>'; 
_html += ' <b></b>'; 
_html += ' <span class="msg_bg_middle">'; 
_html += ' <font>' + title + '</font>'; 
_html += ' <i class="message_close"> x </i>'; 
_html += ' </span>'; 
_html += ' <em></em>'; 
_html += ' </h3>'; 
_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></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').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); 
}); 
}; 
// According to  
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 of high
this.lays = function (width, height) { 
if (width != 0 && width) this.layer.width = width; 
if (height != 0 && height) this.layer.height = height; 
}; 
//Rendering attributes
this.anim = function (type, speed) { 
if (type != 0 && type) this.anims.type = type; 
if (speed != 0 && speed) { 
switch (speed) { 
case 'slow': ; break; 
case 'fast': this.anims.speed = 200; break; 
case 'normal': this.anims.speed = 400; break; 
default: this.anims.speed = speed; break; 
} 
} 
}; 
//Layer removal 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) + ' Automatic shutdown after seconds ]'); 
}, 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:

 
var msg = '<p class="message_txt"> The current is ' + json.total + ' Three pending users 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);