页面弹窗并且加载数据的实现,使用jquery和普通js方法结合实现浏览器的兼容

这里假设父页面有个弹窗按钮,点击后弹出一个新的窗体,而这个窗体还要包含父窗口的数据,在子窗体操作完后关闭子窗体然后刷新父窗体:

父窗体的弹窗按钮单击事件触发后的处理函数:

 1 function sendToMakePrice(){
 2     var hr#hrid").val();
 3     var app#appid").val();
 4     var pos#posid").val();
 5     var his#hisid").val();
 6 
 7         //到同意与否的界面respond.jsp
 8     var tempForm = document.createElement("form");    
 9      tempForm.>;    
10      tempForm.method="post";    
11      tempForm.action="${pageContext.request.contextPath}/skipmakepricedetail.action";    
12      tempForm.target="makepricepage";       
13      var hridInput = document.createElement("input");    
14      hridInput.type="hidden";    
15      hridInput.name= "hrid"  
16      hridInput.value= hrid;  
17      var posidInput = document.createElement("input");    
18      posidInput.type="hidden";    
19      posidInput.name= "posid"  
20      posidInput.value= posid;  
21      var appidInput = document.createElement("input");    
22      appidInput.type="hidden";    
23      appidInput.name= "appid"  
24      appidInput.value= appid;  
25      var hisidInput = document.createElement("input");    
26      hisidInput.type="hidden";    
27      hisidInput.name= "hisid"  
28         hisidInput.value= hisid; 
29      tempForm.appendChild(hridInput);     
30      tempForm.appendChild(posidInput);    
31      tempForm.appendChild(appidInput);  
32      tempForm.appendChild(hisidInput); 
35      document.body.appendChild(tempForm);  
36     $("#tempForm1").bind("submit",function(){
37         openMakePricePage();
38          });
39     $("#tempForm1").submit();
40      document.body.removeChild(tempForm);  
41     
42 }
43 function openMakePricePage(){
44         window.open("","makepricepage",'height=300, width=480, top=200, left=400, toolbar=no,alwaysRaised=true'+
45      'menubar=no,scrollbars=no,resizable=no,location=no, status=no,alwaysRaised=yes,titlebar=no,toolbar=no'); 
46 }

首先从父窗口获取参数值,然后使用js的

document.createElement("form");  创建一张表单以及属性35行是将创建的表单追加到当前页面,注意在这以后写表单提交的监听函数,然后提交,最后注意清楚你创建的表单,
这样一来结构就很明显,单击弹窗按钮后调用这个
sendToMakePrice()函数,创建好你要访问的后台action表单,然后提交表单触发提交时间,返回一个openMakePricePage()函数,这个函数再调用window.open函数打开你的新窗体,注意这里的写法,第一个参数为""不然新窗体显示名字,第二个参数则必须与12行target属性相同,这样弹出来的窗体就包含父窗体的属性了。
 1 function makePrice(){
 2     var price=$("#price").val();
 3     var ea=/^[0-9]*$/;
 4     if(!ea.test(price)){
 5         alert("请输入数字")
 6         return ;
 7     }
 8     var pos#posid").val();
 9     var hr#hrid").val();
10     var app#appid").val();
11     var hrinfo=$("#hrinfo").val();
12     var his#hisid").val();
13     $.ajax( {
14                   type: "POST",
15                 url : "makeprice.action",
16                 data: "pos>hisid,
17                 success : function(html) {
18                         alert("发送成功");
19                         opener.opener.location.reload();
20                          opener.window.close();
21                         setTimeout("window.close()",1000);
22                                 }
23                             });
24 }

这里是子窗体操作提交后提示信息刷新父窗体并且1秒后关闭自己的函数,19行的函数即使刷新父窗体21行写了一个时间触发器关闭窗体这样实现一个比较平稳的过渡