自己写的简单的前端弹出层脚本

　　因为要在前端做一些用户提示交互行为，但是又觉得浏览器自带的一些方法所实现的效果和样式太丑，所以自己就写了一个简单的弹出层提示；

主要的实现思路就是页面动态添加和删除div标签；如下：

var myLayer = {
shadeStyle: "width:100%;height:100%; position: fixed;top: 0;left: 0;background-color:#000;opacity:0.4;z-index:999;",
contentMainStyle: "width:360px;height:260px;position:fixed;left:35%;top:30%;background:rgb(254,254,254);z-index:1000;",
contentTitleStyle: "height:40px;font-size:20px;padding-left:15px;font-family:'Microsoft YaHei';background-color: #71C671;line-height:40px;",
buttonWrapStyle: "height:60px;font-size:20px;",
contentMsgStyle:"padding:10px;height:140px;",
divShade: "<div></div>",
divContent: "<div></div>",
contentMsg: "",
confirmReturnValue: false,

confirmOK: function () { },
confirmCancel:function(){},
show: function () {
$("body").append(this.divShade);
$("body").append(this.divContent);
},
close: function () {
$("#divShade").remove();
$("#divContent").remove();
},
setValueOK: function (msg) {
this.contentMsg = msg;
this.divShade = "<div id=\"divShade\" style=\"" + this.shadeStyle + "\"></div>";
this.divContent = "<div id=\"divContent\" style=\"" + this.contentMainStyle + "\"><div style=\"" + this.contentTitleStyle + "\">提示信息</div><div style=\"" + this.contentMsgStyle + "\">" + this.contentMsg + "</div><div style=\""+this.buttonWrapStyle+"\"><div onclick=\"myLayer.close();\" style=\"cursor: pointer;margin: 5px auto;display: block;width: 60px;padding-top: 3px;padding-left: 16px;background-color: #7CCD7C;\">确定</span></div></div>";
},

setValueOKCancel: function (msg,funcOK,funcCancel) {
this.contentMsg = msg;
if (funcOK && typeof funcOK==="function") {
this.confirmOK = funcOK;
}
if (funcCancel && typeof funcCancel==="function") {
this.confirmCancel = funcCancel;
}
this.divShade = "<div id=\"divShade\" style=\"" + this.shadeStyle + "\"></div>";
this.divContent = "<div id=\"divContent\" style=\"" + this.contentMainStyle + "\"><div style=\"" + this.contentTitleStyle + "\">提示信息</div><div style=\"" + this.contentMsgStyle + "\">" + this.contentMsg + "</div><div style=\"" + this.buttonWrapStyle + "\"><div style=\"margin: 5px auto;display: block;padding-top: 3px;width: 160px;\"><span style=\"background-color: #7CCD7C;padding:3px 15px;cursor: pointer;\" onclick=\"myLayer.close();myLayer.confirmOK();\">确定</span>&nbsp;<span style=\"background-color: #7CCD7C;padding:3px 15px;cursor: pointer;\" onclick=\"myLayer.close();myLayer.confirmCancel();\">取消</span></div></div></div>";
},

alert: function (msg) {
this.setValueOK(msg);
this.show();
},
msg: function (msg, left, top) {//left:35%;top:30%;
var style = "height:40px;line-height:40px;padding-left:15px;border-radius:8px;background-color:#7ccd7c;z-index:1000;";

if (left&&top) {
style += "left:" + left + "px";
style += "top:" + top + "px;position:absolute;";
} else {
style += "left:35%;top:30%;position:fixed;";
}
var msgDiv = "<div id=\"msg\" style=\""+style+"\">" + msg + "</div>";

$("body").append(msgDiv);
$("#msg").fadeIn();
$("#msg").fadeOut(3000, function () { $("#msg").remove(); });
},
confirm: function (msg,funcOK,funcCancel) {
this.setValueOKCancel(msg,funcOK,funcCancel);
this.show();
},
tips: function (IDselector, tip) {
var offset=$("#" + IDselector).offset();
var left = offset.left;
var top = offset.top-40;
this.showTip(tip, left, top);

},
showTip: function (tip, left, top) {
var style = "height:40px;line-height:40px;padding-left:15px;border-radius:8px;background-color:#7ccd7c;z-index:1000;";

if (left && top) {
style += "left:" + left + "px;";
style += "top:" + top + "px;position:absolute;";
}
var msgDiv = "<div id=\"tip\" style=\"" + style + "\">" + tip + "</div>";

$("body").append(msgDiv);

}
}