仿优书网的信息提示
1 (function () { 2 var that = this; 3 function MyAlert(obj) { 4 obj = obj || {}; 5 this.flag = false; 6 this.width = obj.width || 300; 7 this.height = obj.height || 50; 8 this.backgroundColor = obj.backgroundColor || "#bd362f"; 9 this.remove_time = obj.remove_time || 3000; 10 this.map = obj.map || $("body"); 11 this.div_father = null; 12 that = this; 13 } 14 15 MyAlert.prototype.render = function (str) { 16 if (!this.flag) { 17 this.div_father = $("<div></div>"); 18 this.div_father.css({ 19 "position": "fixed", 20 "zIndex":999, 21 "top": 20, 22 "right": 20, 23 }).appendTo(this.map); 24 this.flag = true; 25 } 26 if (this.flag) { 27 var div_child = $("<div></div>"); 28 div_child.text(str); 29 div_child.css({ 30 "width": this.width, 31 "height": this.height, 32 "backgroundColor": this.backgroundColor, 33 "lineHeight": this.height + "px", 34 "textAlign": "center", 35 "marginBottom": "10px", 36 "color": "#ffffff", 37 "borderRadius": "5px", 38 "box-shadow":"0 0 12px #000", 39 // font-size: 14px; 40 "font-size":"15px" 41 }).prependTo(this.div_father); 42 43 setTimeout(function () { 44 div_child.fadeOut(1000, function () { 45 // // that.div_child.pop(); 46 div_child.remove(); 47 48 if (that.div_father.find("div").length === 0) { 49 that.div_father.remove(); 50 that.div_father = null; 51 that.flag = false; 52 } 53 }) 54 }, this.remove_time); 55 } 56 } 57 58 window.MyAlert = MyAlert; 59 } 60 )();
var myalert = new MyAlert();
myalert.render("密码错误")；
不过优书网的提示鼠标放在上面就会清除定时器。还没想好定时器如何与dom绑定。自定义属性记录吗？
(function () {
var that = this;
function MyAlert(obj) {
obj = obj || {};
this.flag = false;
this.width = obj.width || 300;
this.height = obj.height || 50;
this.backgroundColor = obj.backgroundColor || "#bd362f";
this.remove_time = obj.remove_time || 3000;
this.map = obj.map || $("body");
this.div_father = null;
that = this;
}
MyAlert.prototype.render = function (str) {
if (!this.flag) {
this.div_father = $("<div></div>");
this.div_father.css({
"position": "fixed",
"zIndex":999,
"top": 20,
"right": 20,
}).appendTo(this.map);
this.flag = true;
}
if (this.flag) {
var div_child = $("<div></div>");
div_child.text(str);
div_child.css({
"width": this.width,
"height": this.height,
"backgroundColor": this.backgroundColor,
"lineHeight": this.height + "px",
"textAlign": "center",
"marginBottom": "10px",
"color": "#ffffff",
"borderRadius": "5px",
"box-shadow":"0 0 12px #000",
// font-size: 14px;
"font-size":"15px"
}).prependTo(this.div_father);
setTimeout(function () {
div_child.fadeOut(1000, function () {
// // that.div_child.pop();
div_child.remove();
if (that.div_father.find("div").length === 0) {
that.div_father.remove();
that.div_father = null;
that.flag = false;
}
})
}, this.remove_time);
}
}
window.MyAlert = MyAlert;
}
)();
