JavaScript pop-up layer and automatic hiding in the lower right corner (written by myself)

JavaScript pop-up layer and automatic hiding in the lower right corner (written by myself)_jquery

WBOY

Release： 2016-05-16 17:13:46

Original

1125 people have browsed it

When writing projects, there is always a need for a pop-up notification in the lower right corner. How to use simpler aspects, more concise code, and achieve better user experience is what we want to do. There are many elastic layers in this market, but the functions are not satisfactory. Below I will share the automatic pop-up layers that I wrote earlier and are still applying now.

Spring layer example image:
JavaScript pop-up layer and automatic hiding in the lower right corner (written by myself)_jquery
The implementation code is as follows:

Css style:

Copy code The 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 -106px; float: right;} 

Js part:

Since Define the lower right corner elastic layer function

Copy the code The code is as follows:

//右下角弹层 
function Messager() { 
this.layer = { 'width': 200, 'height': 100 }; 
this.title = '信息提示'; 
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; 
//初始化 
this.inits = function (title, text) { 
_anims = this.anims; 
_title = title; 
var _html = ''; 
_html  = ' '; 
_html  = ' '; 
_html  = ' '; 
_html  = ' '   title   ''; 
_html  = ' ×'; 
_html  = ' '; 
_html  = ' '; 
_html  = ' '; 
_html  = ' '; 
_html  = ' '   text   '
'; 
_html  = ' '; 
_html  = ' 
'; 
_html  = ' '; 
_html  = '
'; 
$(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); 
}); 
}; 
//显示 
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); 
}; 
//设置宽高 
this.lays = function (width, height) { 
if (width != 0 && width) this.layer.width = width; 
if (height != 0 && height) this.layer.height = height; 
}; 
//呈现属性 
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; 
} 
} 
}; 
//移除层时间 
this.rmmessage = function (time) { 
if (time > 0) { 
timer1 = setTimeout(function () { closeMsg(); }, time); 
if (this.isTiming) { 
timing(time); 
} 
} 
}; 
//计时 
timing = function (time) { 
_time = time / 1000; 
_timer2 = setInterval(function () { 
_obj.find('.msg_bg_middle').find('font').html(_title   ' ['   (--_time)   '秒后自动关闭]'); 
}, 1000); 
} 
//关闭层 
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); 
} 
} 