原本计划实现这样一个需求： 前台点击触发某业务动作，需要用户补充信息，不做跳转页面，弹窗的形式进行补充信息。 折腾出来了，但是最终没有用到。
代码还有些毛躁，提供大概实现逻辑。
实现思路：在窗口铺上蒙板以屏蔽原窗口功能按钮操作，在蒙板上层绝对定位实现弹窗，弹窗中的数据交互采用ajax方式。 出发弹窗事件用onclick.
关键细节：弹窗和原窗体本质是同页面，为了描述方便，姑且称底层窗体为父窗体，弹窗为子窗体。为了实现字父窗体的交互，需要在父窗体中做一些特别标签，以便选择器选择，并操作插入新的dom对象。
如此，首先看下父窗体的代码，关键部分我是有注释的。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta content="initial-scale=1.0, user-scalable=no"> <meta content="yes"> <meta content="black"> <title>测试弹窗</title> <script type="text/javascript" src="https://www.jb51.net/script/jquery/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/script/js/outil.js" charset="utf-8"></script> <script charset="utf-8" type="text/javascript" src="https://www.jb51.net/script/jquery/jquery.ui.js"></script> <link type="text/css" href="https://www.jb51.net/script/jquery/themes/ui-lightness/jquery.ui.css"> <script charset="utf-8" type="text/javascript" src="https://www.jb51.net/script/dialog/dialog.js"></script> <link href="https://www.jb51.net/script/dialog/dialog.css" type="text/css"> <style type="text/css"> *{ margin: 0; padding: 0; text-align: center; text-decoration: none; } body{ font: 12px/1.5 宋体,Tahoma, Arial,sans-serif; font-family: "微软雅黑"; width:320px; height: auto; margin:0 auto; } .content{ border: #ccc solid 1px; margin:60px 10px 10px; background:#fff; overflow:hidden; color:#6b6b6b; font-size:14px; border-radius:5px; } </style> </head> <body> <!-- 选择器是通过ectype="dialog"来进行选择的 --> <div> <a href="javascript:void(0);" ectype="dialog" dialog_id="dialog_test" dialog_title="对话测试" dialog_width="300" uri="pop_son.html" > 对话测试 </a> </div> </body> </html>
接着给出选择器部分代码，也就是outil.js的代码，当然之前的jquery以及jquery ui就不说了。 其核心是绑定click事件。
jQuery.extend({ getCookie : function(sName) { var aCookie = document.cookie.split("; "); for (var i=0; i < aCookie.length; i++){ var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0]) return decodeURIComponent(aCrumb[1]); } return ''; }, setCookie : function(sName, sValue, sExpires) { var sCookie = sName + "=" + encodeURIComponent(sValue); if (sExpires != null) sCookie += "; expires=" + sExpires; document.cookie = sCookie; }, removeCookie : function(sName) { document.cookie = sName + "=; expires=Fri, 31 Dec 1999 23:59:59 GMT;"; } }); $(function(){ /* dialog 选择并绑定一个新的click事件 */ $('*[ectype="dialog"]').click(function(){ var id = $(this).attr('dialog_id'); var title = $(this).attr('dialog_title') ? $(this).attr('dialog_title') : ''; var url = $(this).attr('uri'); var width = $(this).attr('dialog_width'); ajax_form(id, title, url, width); return false; }); }); function drop_confirm(msg, url){ if(confirm(msg)){ window.location = url; } } /* 显示Ajax表单 */ function ajax_form(id, title, url, width) { if (!width) { width = 400; } var d = DialogManager.create(id); d.setTitle(title); d.setContents('ajax', url); d.setWidth(width); d.show('center'); return d; } function go(url){ window.location = url; } function set_zindex(parents, index){ $.each(parents,function(i,n){ if($(n).css('position') == 'relative'){//alert('relative'); //alert($(n).css('z-index')); $(n).css('z-index',index); } }); } function js_success(dialog_id) { DialogManager.close(dialog_id); var url = window.location.href; url = url.indexOf('#') > 0 ? url.replace(/#/g, '') : url; window.location.replace(url); } function js_fail(str) { $('#warning').html('<label>' + str + '</label>'); $('#warning').show(); } function check_pint(v) { var regu = /^[0-9]{1,}$/; if(!regu.test(v)) { alert(lang.only_int); return false; } return true; } /* 转化JS跳转中的 ＆ */ function transform_char(str) { if(str.indexOf('&')) { str = str.replace(/&/g, "%26"); } return str; } // 复制到剪贴板 function copyToClipboard(txt) { if(window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); } else if(navigator.userAgent.indexOf("Opera") != -1) { window.location = txt; } else if (window.netscape) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { return false; } var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); if (!clip) return false; var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); if (!trans) return false; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); var copytext = txt; str.data = copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid = Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } }
绑定事件的相关代码就是dialog的核心代码(dialog.js)了，这个是在网上找到的，在此感谢，代码如下所示：