`
xieboxin
  • 浏览: 4691 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

Javascript 提交时的消息或提示窗口

阅读更多
花了一段时间完成的,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
3
0
分享到:
评论

相关推荐

    Javascript窗口与提示大全

    本文档将详细介绍几种常用的JavaScript窗口操作方法,包括但不限于按钮提示框、提交按钮、关闭按钮等功能。 #### 二、按钮提示框 按钮提示框是一种常见的交互方式,用于向用户询问确认或提供警告信息。通常包括`...

    javascript模态窗口

    - 提示信息:用户提交表单前确认操作。 - 用户反馈:提供一个弹出窗口让用户填写反馈信息。 - 登录/注册:在网站上提供弹出登录或注册界面。 - 图片预览:点击图片后在模态窗口中展示大图。 总的来说,JavaScript...

    javascript弹出窗口问题总结

    本篇文章将针对JavaScript弹出窗口的相关问题进行总结,包括无提示刷新网页、刷新页面的方法、弹出窗口代码、模式窗口的数据刷新问题、模式窗口中链接弹出新窗口以及无提示关闭页面的方法。 1. **无提示刷新网页** ...

    使用javascript验证窗口是关闭还是刷新

    3. **关闭窗口/选项卡**:当用户通过点击浏览器右上角的关闭按钮或使用快捷键等方式关闭当前窗口或选项卡时,该事件的发生需要被程序所捕捉。 4. **刷新页面**:当用户手动刷新页面(通常通过F5键或浏览器工具栏中的...

    Javascript关闭当前窗口

    本文将详细介绍如何在JSP页面中使用JavaScript代码来直接关闭当前窗口,并且不会弹出任何提示框。 #### 二、基本语法 在JavaScript中,关闭当前窗口的基本语法是`window.close()`。这条语句可以在用户执行某些操作...

    javascript弹出窗口

    **应用场景**:适用于需要在一个新的浏览器窗口或标签页打开另一个页面的情况,如查看大图、预览文档等。 #### 六、总结 通过以上介绍,我们可以看出JavaScript中的这四种弹窗方式各有特点和适用场景。合理地使用...

    jquery消息提示窗口

    在网页开发中,用户交互是不可或缺的一环,消息提示窗口作为用户操作反馈的重要工具,其设计和实现往往直接影响到用户体验。本篇文章将深入探讨“jQuery消息提示窗口”这一主题,包括其兼容性、调用方式以及通用性等...

    JavaScript 关于浏览窗口不关闭的问题

    标题“JavaScript 关于浏览窗口不关闭的问题”涉及到的核心知识点是阻止或提示用户在尝试关闭窗口时的行为。 首先,JavaScript提供了`window.onbeforeunload`事件,这个事件会在窗口(包括页面)即将卸载之前触发。...

    jQuery 实现弹出消息窗口,相当的绚丽

    在IT领域,jQuery是一款广泛使用的...通过结合HTML、CSS和JavaScript,我们可以创建出具有各种动态效果的消息提示窗口,为用户提供更好的交互体验。在实际项目中,可以根据需求进行定制,以满足不同场景的应用。

    一个JQuery插件 - Javascript可拖动的模式窗口

    模式窗口通常用于弹出需要用户注意或者需要用户交互的情况,如登录对话框、警告提示或表单提交。这种窗口会在页面的其余部分上创建一层半透明的遮罩,使用户只能与窗口本身进行交互,直到窗口关闭。 ### 插件实现 ...

    遮罩层层效果 可用于弹出窗口,提示信息,确认提示框或提交数据进行表单验证和图片遮罩等

    当用户触发某个操作(如点击按钮)时,遮罩层会出现在页面上,覆盖所有可交互的元素,而弹出窗口则在遮罩层之上显示,这样用户只能与弹出窗口交互,直到关闭窗口或完成操作。 对于提示信息和确认提示框,遮罩层同样...

    JavaScript实现提交模式窗口后刷新父窗口数据的方法

    来得到父窗口,但是可以借助showModealDialog的返回值来判断是否刷新,当调用showModealDialog时,父窗口代码会停在这一行,当弹出的模式窗口关闭时给window.returnValue赋值,再调用window.close()方法,最后submi

    html+css+javascript模拟QQ登陆窗口效果

    2. **模拟登录**:虽然实际的QQ登录涉及服务器交互,但在这里我们可以简单地模拟登录成功或失败的反馈,例如改变按钮文本或显示提示信息。 3. **记住我功能**:如果用户勾选了“记住我”,可以通过`localStorage`来...

    JavaScript实现弹出子窗口并传值给父窗口

    在JavaScript编程中,有时我们需要创建一个子窗口与主窗口(或父窗口)进行交互,例如在Web应用程序中打开一个新的对话框来获取用户输入或者显示详细信息。本文将深入讲解如何利用JavaScript实现弹出子窗口,并将子...

    javascript的事件大全

    - onSubmit:表单提交时触发,用于验证表单数据或阻止默认提交行为。 5. 滚动字幕事件(Marquee元素相关): - onBounce:Marquee内容超出显示范围时触发。 - onFinish:Marquee内容播放完毕时触发。 - onStart...

    JavaScript客户端验证和页面特效制作(JavaScript)

    这有助于提高用户体验,减少服务器的负担,因为无效或不完整的数据在提交前就能被发现。常见的客户端验证包括: 1. **数据类型验证**:检查用户输入是否符合预期的数据格式,如电子邮件地址、电话号码、日期等。 2....

    javascript练习

    其中包含javaScript上机题目,以及答案源码 题目如下 1、 页面两侧的可关闭的对联广告 2、 窗口加载的时候打开一个无状态栏,地址栏的广告窗口 3、 页面中五张轮换播放的最新产品图片 4、 用户名和密码不能为空,...

    JAVASCRIPT页面效果实例

    JavaScript可以创建模态窗口、提示对话框或警告信息,比如使用`alert()`、`confirm()`和`prompt()`函数。也可以通过自定义DOM元素和CSS样式来创建更复杂的交互式弹窗。 6. **表单验证** 在提交表单前,JavaScript...

    程序天下:JavaScript实例自学手册

    12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时...

Global site tag (gtag.js) - Google Analytics