花了一段时间完成的,JS源代码如下:
IE6.0 或以上, firefox, opera等浏览器都测试通过。附件附带图片,CSS,及测试HTML
var msgObj;
function showMessage(message, url, headImageType) {
if(message!=null && message!=''){
msgObj = new MessageObj(message, url, headImageType, true);
msgObj.show();
}else{
msgObj = null;
}
}
function loadingMessage(count, message, headImageType, isClose) {
msgObj = new MessageObj(message, null, headImageType, isClose);
msgObj.waiting(count);
}
var show_message_loading_image = new Array();
show_message_loading_image[0] = 'image/13221814.gif';
show_message_loading_image[1] = 'image/05043130.gif';
show_message_loading_image[2] = 'image/13221818.gif';
show_message_loading_image[3] = 'image/13221815.gif';
var show_message_Head_image = new Array();
show_message_Head_image['warn'] = 'image/error.png';
show_message_Head_image['accept'] = 'image/accept.png';
show_message_Head_image['info'] = 'image/information.png';
show_message_Head_image['error'] = 'image/exclamation.png';
show_message_Head_image['help'] = 'image/help.png';
show_message_Head_image['star'] = 'image/star.png';
show_message_Head_image['stop'] = 'image/stop.png';
show_message_Head_image['new'] = 'image/new.png';
function MessageObj(message, url, headImageType, isClose){
this.message = (message==null||message=='') ? " Waiting…" : message;
this.url = (url==null||url=='') ? null : url;
this.isClose = (isClose==null) ? false : isClose;
this.body = document.getElementById('body');
this.msg = this.createDiv("message_show", "message_show");
this.msgBg = this.createDiv("message_bg", "message_bg");
this.msgMain = this.createDiv("message_main", "message_main");
this.msgMainBody = this.createDiv("message_body", "message_body");
this.msgMainHead = this.createDiv("message_head", "message_head");
this.msgMainFoot = this.createDiv("message_foot", "message_foot");
this.loading_image = show_message_loading_image;
if(headImageType!=null){
this.headImage = show_message_Head_image[headImageType];
}else{
this.headImage = show_message_Head_image['warn'];
}
if(isClose){
this.closeImg = this.createCloseImage();
this.closeButton = this.createButton();
}
}
MessageObj.prototype.show = function() {
if (this.message!=null && this.message!='') {
if(this.isClose){
this.msgMainHead.appendChild(this.closeImg);
this.msgMainFoot.appendChild(this.closeButton);
}
this.msgMainHead.appendChild(this.createImage(this.headImage, "head_type", ""));
var span = document.createElement("span");
span.className = "span";
span.appendChild(this.createText());
this.msgMainHead.appendChild(span);
this.msgMainBody.appendChild(this.createText(this.message, true));
this.msgMain.appendChild(this.msgMainHead);
this.msgMain.appendChild(this.msgMainBody);
this.msgMain.appendChild(this.msgMainFoot);
this.msg.appendChild(this.msgBg);
this.msg.appendChild(this.msgMain);
this.body.parentNode.insertBefore(this.msg, this.body);
msgObj.center();
}
}
MessageObj.prototype.waiting = function (count) {
var image ;
if(count==null||count<0||count>this.loading_image.length){
image = this.loading_image[0];
}else{
image = this.loading_image[count];
}
this.msgMainBody.appendChild(this.createImage(image, "", " Waiting..."));
if(this.isClose){
this.msgMainHead.appendChild(this.closeImg);
this.msgMainFoot.appendChild(this.closeButton);
}
this.msgMainHead.appendChild(this.createImage(this.headImage, "head_type", ""));
var span = document.createElement("span");
span.className = "span";
span.appendChild(this.createText());
this.msgMainHead.appendChild(span);
span = document.createElement("span");
span.className = "span";
span.appendChild(this.createText(this.message, true));
this.msgMainBody.appendChild(span);
this.msgMain.appendChild(this.msgMainHead);
this.msgMain.appendChild(this.msgMainBody);
this.msgMain.appendChild(this.msgMainFoot);
this.msg.appendChild(this.msgBg);
this.msg.appendChild(this.msgMain);
this.body.parentNode.insertBefore(this.msg, this.body);
msgObj.center();
}
MessageObj.prototype.createDiv = function (id, className) {
var div = document.createElement("div");
div.setAttribute("id", id);
div.className = className;
return div;
}
MessageObj.prototype.createImage = function (src, className, alt) {
var img = document.createElement("img");
img.setAttribute("src", src);
img.className = className;
img.setAttribute("alt", alt);
return img;
}
MessageObj.prototype.createCloseImage = function() {
var img = document.createElement("img");
img.setAttribute("src","image/login_close.gif");
img.setAttribute("alt", "Close");
img.className = "close";
img.onclick = function() {
if (msgObj.url == null) {
msgObj.close();
} else {
location = msgObj.url;
}
};
return img;
}
MessageObj.prototype.createButton = function() {
var button = document.createElement("button");
button.setAttribute("id", "show_message_colse_button");
button.setAttribute("type", "button");
button.onclick = function() {
if (msgObj.url == null) {
msgObj.close();
} else {
location = msgObj.url;
}
};
button.appendChild(this.createText("OK"));
return button;
}
MessageObj.prototype.close = function() {
var massage_show = document.getElementById("message_show");
if (massage_show != null) {
massage_show.parentNode.removeChild(massage_show);
}
}
MessageObj.prototype.createText= function(messageText, isHtml) {
if (messageText == null) {
messageText = "Message: ";
}
if(true == isHtml){
var span = document.createElement('span');
span.innerHTML = messageText;
return span;
}else{
return document.createTextNode(messageText);
}
}
MessageObj.prototype.full_show = function() {
var msg = document.getElementById('message_show');
msg.style.height = document.body.scrollHeight;
msg.style.width = document.body.scrollWidth;
}
MessageObj.prototype.centerHeight = function() {
var msgMain = document.getElementById('message_main');
if(msgMain!=null){
var msgMainBody = document.getElementById('message_body');
var msgMainFoot = document.getElementById('message_foot');
var msgMainBodyHeight = msgMainBody.offsetHeight;
if (msgMainBodyHeight < 120) {
var wrap = Math.round(((120 - msgMainBodyHeight) / 4));
msgMainBody.style.marginTop = wrap + "px";
if(msgMainFoot!=null){
msgMainFoot.style.marginTop = (wrap * 3) + "px";
}
} else {
msgMain.style.width = "500px";
msgMain.style.height = (msgMainBody.offsetHeight + 88) + "px";
if(msgMainFoot!=null){
msgMainFoot.style.marginTop = "10px";
}
}
var swrapHeight = document.body.scrollTop;
if (swrapHeight == 0) {
swrapHeight = document.documentElement.scrollTop;
}
if (swrapHeight == 0) {
msgMain.style.top = "180px";
} else {
msgMain.style.top = (swrapHeight + 180) + "px";
}
}
}
MessageObj.prototype.centerWidth = function() {
var msgMain = document.getElementById('message_main');
if (msgMain != null) {
var width = document.body.clientWidth;
var position = Math.round((width - msgMain.offsetWidth)/2);
msgMain.style.left = position + 'px';
}
}
MessageObj.prototype.center = function(){
this.full_show();
this.centerHeight();
this.centerWidth();
}
function show_message_fucus(){
var button = document.getElementById('show_message_colse_button');
if(button!=null){
button.focus();
}
}
window.onresize = function(){
if(msgObj!=null){
msgObj.centerWidth();
};
}
IE6.0 或以上, firefox, opera等浏览器都测试通过。附件附带图片,CSS,及测试HTML