花了一段时间完成的,JS源代码如下:
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