jquery中在一个页面中弹出编辑对话框的实例
在web开发中，一个页面的某些字段可能需要通过弹出浮出对话框的形式完成，这就要用到弹出框和其依赖的父类窗口的控制句柄，只有利用这个句柄才能操作对应页面的字段值的修改，当然具体的业务场景需要中的页面来源的数据需要从数据库中获取，并且带有更有的处理判断逻辑，这里只是给一个简单的弹出对话框，并且用jquery对页面元素对值进行回写。
?
主要用到的插件是：
?<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=default"></script>
?
弹窗的父页面 ：
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="lhgdialog.min.js?self=true&skin=default"></script> <link rel="stylesheet" type="text/css" href="style.css"/></head><body> <div id="riskNameId" type="text" maxlength="10" value="爆炸物相关书籍" readonly /></div> </div> </div> <div onclick="editPath()">编辑</a>]</strong> </div> <div id="parentPathId" type="text" maxlength="900" value="禁售商品>易燃易爆类>其他涉爆商品" readonly/> </div> </div> </div> </body><script type="text/javascript"> var riskId="123"; function editPath(){ //从父类窗口中弹出编辑路径对话框 var dialog = $ .dialog({ title:'编辑风险路径', data:riskId, content:'url:casepathmodify11.html', lock:true, width:700, height:200, resize:true }); }</script></html>?弹窗页面的html：
?
casepathmodify11.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var api = frameElement.api, W = api.opener; //父子窗口的句柄，可以通过他们操作对应页面的标签和属性值，类似jquery选择器 var riskId = api.data; // 得到riskId,通过这种方式得到父类窗口中穿过来的post参数值 window.onload = function () { $('#riskName').val(W.$('#riskNameId').val()); var pathArray = W.$('#parentPathId').val().split(">"); for (var i = 0; i <pathArray.length; i++) { var j=i+1; var selectedText=pathArray[i]; $("#"+j+"Catalog option").each(function(){ var optionText=$(this).text().trim(); // this指的是前面的option标签选择器 if(optionText==selectedText){ $(this).attr("selected",true); //遍历对选菜单属性值，一个多选菜单中的某一个option属性为selected } }); } }; api.button({ id:'valueOk', name:'确定', callback:ok //执行确定操作后的回调函数 }); api.button({ id:'valueCancel', name:'取消' }); /* 函数ok即为上面添加按钮方法中callback回调函数调用的函数 */ function ok() { W.$('#riskNameId').val($('#riskName').val()); var newPath=""; for(var i=1;i<=4;i++){ var elem = $("#"+i+"Catalog").find("option:selected").text().trim(); if(elem=="") {alert("不能选项中不能有空选！");return;} newPath+=elem+">"; } W.$('#parentPathId').val(newPath.substring(newPath,newPath.length-1)); alert("修改成功!"); return true; }; </script> <style type="text/css"> td { padding: 6px; height: 10px; } .selects { margin-left: 2px; width: 120px; height: 25px; } .titles { text-align: right; height: 25px; font-size: 14px; } input { height: 22px; font-size: 13px; } </style></head><body><table> <tr> <td id="riskName" maxlength="16"> </td> </tr> <tr> <td id="1Catalog" name="1Catalog" > <option value=""></option><option value="cashi1">ceshi1</option><option value="cashi1">ceshi2</option><option value="cashi1">禁售商品</option> </select> <select id="2Catalog" name="2Catalog" > <option value=""></option><option value="cashi1">ceshi1</option><option value="cashi1">ceshi2</option><option value="cashi1">易燃易爆类</option> </select> <select id="3Catalog" name="3Catalog" > <option value=""></option><option value="cashi1">ceshi1</option><option value="cashi1">ceshi2</option><option value="cashi1">其他涉爆商品</option> </select> <select id="4Catalog" name="4Catalog" > <option value=""></option><option value="cashi1">ceshi1</option><option value="cashi1">ceshi2</option><option value="cashi1">其他涉爆商品</option> </select> </td> </tr></table><div id="tips"></div></body></html>??? 相见具体效果，请参考附件。