|
花了一段时间完成的,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 |
|