修改了上次博客的提示小插件。
使他出现的初始位置始终随着窗口大小改变,使之出现在最中间的位置。
两种模式:模态,非模态。
4种提示的样式。实现方法:在button绑定点击事件里绑定body用appearDialog方法。
才疏学浅,还在努力,有志同道合的朋友么。
(function($, window, document,undefined){
var dialogInfo = {
message: 'this ia a message', // 消息内容
style: 'info', // 弹窗类型
time: 1000, // 显示时间
model:false // 是否模态
};
$.gmNoticeWnd = function(opt) {
var settings = $.extend({}, dialogInfo, opt),
dialogHtml = "";
dialogHtml += '<div class = "notice alert" style = "width:200px; padding:0px">';
dialogHtml += "<div class = 'notice-head' style = 'height: 10px'>";
dialogHtml += "<button type = 'button' class = 'close' style = 'display: none'>×</button>";
dialogHtml += "</div>";
dialogHtml +="<br>"
dialogHtml += "<div class = 'notice-body'>";
dialogHtml += "<p style = 'margin: 0px; word-break: break-all; text-indent:2em;'>" + settings.message + "</p>";
dialogHtml += "</div>";
dialogHtml += '</div>';
var modalDialog = "<div class = 'noticecover' id = 'coverId' style = 'position: absolute; top: 0; left: 0; width:100%; height:100%; z-index: 9999;'>" +
dialogHtml +
"</div>";
return (function setNotice() {
var noticeStyle = settings.style;
if (settings.model == false) {
$("body").append(dialogHtml);
$(".noticecover").css("background","#000000");
} else {
$("body").append(modalDialog);
$("button").css("display","block");
};
var $notice = $(".notice"),
noticeTop = (document.documentElement.clientHeight / 2) - $notice.height(),
noticeLeft = (document.documentElement.clientWidth / 2) - $notice.width() / 2;
$notice.css({"position": "absolute",
"top": noticeTop,
"left": noticeLeft,
});
switch (noticeStyle) {
case 'error':
$notice.addClass("alert-danger");
break;
case 'normal':
$notice.addClass("alert-success");
break;
case 'warning':
$notice.addClass("alert-warning");
break;
default:
$notice.addClass("alert-info");
};
setTimeout(function() {
if (settings.model == false) {
$notice.remove();
} else {
$(".close").click(function() {
$(".noticecover").remove();
});
};
}, settings.time);
function setPosition() {
var fatherCover = document.getElementById("coverId"),
changedLeft = $(fatherCover).width() / 2 - $notice.width() / 2;
changedTop = $(fatherCover).height() / 2 - $notice.height() / 2;
$notice.css({"position": "absolute",
"top": changedTop,
"left": changedLeft,
});
}
if (window.addEventListener) {
window.addEventListener("resize", function() {
setPosition();
})
} else if (window.attachEvent) {
window.attachEvent("onresize", function() {
setPosition();
})
}
} ());
};
$.fn.appearDialog = function(opt) {
$.gmNoticeWnd(opt);
};
})(jQuery, window, document);