模式对话框辛酸往事

本文介绍了一个使用模式对话框的实际项目案例,详细展示了如何通过JavaScript创建模式对话框并与父页面进行交互,包括刷新父页面、数据验证及国际化实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

昨天好友老J问我有没有运用过模式对话框,我突然想起来我们一年前曾经做过的一个项目里,客户要求用模式对话框,

这个让我一开始很头大的问题,由于我们小组成员都是刚毕业的学生,三男一女,那时候每天晚上基本都是1点睡觉

早上6点半起床7点就工作了,大冬天的,就这样持续了二个多月,当时是一腔热血,目前两个同学转测试了,女生到一个软件培训机构教书去了。

 

 

父页面在head标签里一定要加下面这句,当模式对话框提交关闭的时候,父页面需要刷新避免从新打开新页面

<base target="_self">

 

下面的js代码是父页面用来创建一个模式对话框

//------------------用于添加------------------------	
	function newwindows() {
			var k=window.showModalDialog("crm/production/productionAddIframe.jsp",window, "dialogHeight:350px;dialogWidth:650px;center:yes;status:no;resizable:no;");
			if (k == 1) {
				window.location.href="./getProductionsByPage.shtml"
			}
		
	}

 这里的window.location.href指的当然就是父页面了

当K=1是将使父页面从新从新获取连接,相当于刷新了父页面

 

下面是模式对话框的添加数据后的保存按钮,当时美工都没,css不是很熟就直接放标签里面了,图片都是自己切的,这里也实现了国际化用的是struts标签的<bean:message key='production.save' />

提交也是在js的=checkname(1)里面,并将1传给了K值通知父窗口发生变化

<html:button onclick="checkname(1)" styleClass="Button" property="previousStep"  style="background-image: url(../../imgs/botton.gif)">
						<bean:message key='production.save' />
					</html:button>

 

//-------------提交时用于验证------------	
	function checkname(refresh){
		var reg=/[\\\/\<\>\?\:\"\*\;]/;
		var code = document.form.pcode.value;
		var name = document.form.pname.value;
		var type = document.form.ptype.value;
		var comt = document.form.pcomt.value;
		if(reg.test(code)||reg.test(name)||reg.test(type)){
			alert(message["character"]);
			return false;
		}
		if(trim(name)==""){
			alert(message["nameNotNull"]);
			return false;
		}else{   
			var pcode = trim(code);
			var pname = trim(name);
			var ptype = trim(type);
			var pcomt = trim(comt);
			if(pcode.length > 50){
				alert(message["codeLength"]);
				return false;
			}
			if(ptype.length>50){
				alert(message["typeLength"]);
				return false;
			}
			if(pname.length>50){
				alert(message["nameLength"]);
				return false;
			}
			document.form.pname.value=pname;
			document.form.pcode.value=pcode;
			document.form.ptype.value=ptype;
			document.form.submit();
			window.close();
		}
		
		window.returnValue = refresh;
	}

 最后的一句window.returnValue = refresh;与父窗口的通讯,window.close();是关闭了模式对话框

 

 

上面的这里连js都实现了国际化

	alert(message["nameNotNull"]);

 

 


 

//----------------去除文本框中字符串的所有空格--------
	function trim(str){	  
		var t = str.replace(/(^\s*)|(\s*$)/g,"");
		var str = t.replace(/\s/g,"")
		return str;
	}

 

下面是回车键保存模式对话框

//-----------用于响应键盘事件-------------
 function KeyDown(){
     if(event.keyCode==13) {        
        check1() 
  
         var b= document.getElementById("res");
         
         if( b.innerHTML!=""){
          return false;
          }
       	checkname(1);
      
         }
	}

 

 

下面 模式对话框里的<div id="res" align="left"></div>与上面代码的var b= document.getElementById("res");
是用来做异步判断添加的名称是否重复

<html:text styleId="pname" onblur="check()" name="productionBean" property="production.prdname" size="70" maxlength="70"></html:text>
					<div id="res" align="left"></div>

 

这个项目是绩效软件给移动公司做的,要求相当的BT,很多地方非常的人性化,相当的不错

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值