前端弹出对话框js实现ajax交互剖析.docx

1、前端弹出对话框js实现ajax交互剖析前端弹出对话框 js 实现 ajax 交互原本计划实现这样一个需求： 前台点击触发某业务动作，需要用户补充信息，不做跳转页 面，弹窗的形式进行补充信息。 折腾出来了，但是最终没有用到。代码还有些毛躁，提供大概实现逻辑。实现思路： 在窗口铺上蒙板以屏蔽原窗口功能按钮操作， 在蒙板上层绝对定位实现弹窗， 弹窗中的数据交互采用 ajax 方式。 出发弹窗事件用 onclick.关键细节： 弹窗和原窗体本质是同页面， 为了描述方便， 姑且称底层窗体为父窗体，弹 窗为子窗体。 为了实现字父窗体的交互， 需要在父窗体中做一些特别标签， 以便选择器选择， 并操作插入新的

2、 dom 对象。如此，首先看下父窗体的代码，关键部分我是有注释的。复制代码 测试弹窗 *margin: 0;padding: 0;text-align: center;text-decoration: none;bodyfont: 12px/1.5 宋体 ,Tahoma, Arial,sans-serif;font-family: 微软雅黑 ; width:320px;height: auto; margin:0 auto;.contentborder: #ccc solid 1px; margin:60px 10px 10px; background:#fff; overflow:hidde

3、n;color:#6b6b6b;font-size:14px; border-radius:5px;对话测试复制代码接着给出选择器部分代码，也就是 outil.js 的代码，当然之前的 jquery 以及 jquery ui 就不说 了。 其核心是绑定 click 事件。复制代码jQuery.extend(getCookie : function(sName) var aCookie = document.cookie.split(; );for (var i=0; i 0 ? url.replace(/#/g, ) : url; window.location.replace(url);fu

4、nction js_fail(str)$(#warning).html( + str + ); $(#warning).show();function check_pint(v)var regu = /人0-91,$/;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 copyToClipb

5、oard(txt) if(window.clipboardData) window.clipboardData.clearData(); window.clipboardData.setData(Text, txt); else if( navigator.userAgent.indexOf(Opera) != -1) window.location = txt; else if (scape) try netscape.security.PrivilegeManager.enablePrivilege(UniversalXPConnect); catch (e) return false;v

6、ar clipComponents.classesmozilla.org/widget/clipboard;1.createInstance(Components.interfaces.n sIClipboard);if (!clip)return false;var transComponents.classesmozilla.org/widget/transferable;1.createInstance(Components.interface s.nsITransferable);if (!trans)return false;trans.addDataFlavor(text/unic

7、ode);var str = new Object();var len = new Object();var strComponents.classesmozilla.org/supports-string;1.createInstance(Components.interfaces.ns ISupportsString);var copytext = txt;str.data = copytext;trans.setTransferData(text/unicode,str,copytext.length*2);var clipid = Components.interfaces.nsICl

8、ipboard;if (!clip)return false;clip.setData(trans,null,clipid.kGlobalClipboard);复制代码帮定事件的相关代码就是 dialog 的核心代码 (dialog.js) 了，这个是在网上找到的，在此感谢， 代码如下所示：复制代码_DIALOG_WRAPPER_ = ;/* IE6有个Bug，如果不给定对话框的宽度的话，在 IE6下，对话框将以100%宽度显示*/DialogManager = create :function(id)var d = ;if (!_DIALOG_WRAPPER_id)d = new Dialo

9、g(id);_DIALOG_WRAPPER_id = d;elsed = DialogManager.get(id);return d;,get :function(id)return _DIALOG_WRAPPER_id;,close :function(id)if (_DIALOG_WRAPPER_id.close()_DIALOG_WRAPPER_id = null;,onClose :function ()return true;,/* 加载对话框样式 */loadStyle :function()var _dialog_js_path = $(#dialog_js).attr(src

10、);var _path = _dialog_js_path.split(/);var _dialog_css = _path.slice(0, _path.length - 1).join(/) + /dialog.css;$(#dialog_js).after(); ScreenLocker = style : position: absolutop: 0px,left: 0px,backgroundColor: #000,opacity: 0.5,zIndex: 999,masker : null,lock : function(zIndex)if (this.masker != null

11、) this.masker.width($(document).width().height($(document).height();return true;this.masker = $();/* IE6 Hack */if ($.browser.msie)$(select).css(visibility, hidden);/var _iframe = $().css(opacity:0, width:100%, height:100%); /this.masker.append(_iframe);/* 样式 */this.masker.css(this.style);if (zIndex

12、) this.masker.css(zIndex, zIndex);/* 整个文档的宽高 */this.masker.width($(document).width().height($(document).height();$(document.body).append(this.masker);,unlock : function()if (this.masker = null)return true; this.masker.remove(); this.masker = null;/* IE6 Hack */if ($.browser.msie)$(select).css(visibi

13、lity, visible);Dialog = function (id)/* 构造函数生成对话框代码，并加入到文档中 */ this.id = id;this.init();Dialog.prototype = /* 唯一标识 */id : null,/* 文档对象 */dom : null,lastPos : null,status : complete,onClose : function ()return true;,tmp : ,/* 初始化 */init : function()this.dom = wrapper : null, body:null, head:null, tit

14、le:null, close_button:null, content:null;= $().get(0);= $().get(0);= $().get(0);= $().get(0);/* 创建对话框主体 */ this.dom.body /* 创建标题栏 */ this.dom.head /* 创建标题文本 */this.dom.title /* 创建关闭按钮 */$(close).get(0);/* 创建内容区域 */this.dom.content = $().get(0);/* 组合 */$(this.dom.head).append().append($().append(this

15、.dom.title).append(this.dom.close_button);$(this.dom.body).append(this.dom.head).append(this.dom.content);$(this.dom.wrapper).append(this.dom.body).append();/* 初始化样式 */$(this.dom.wrapper).css(zIndex : 9999,display : none,position : absolute);$(this.dom.body).css(position : relative);$(this.dom.head)

16、.css(cursor : move);$(this.dom.close_button).css(position : absolute,text-indent: -9999px,cursor : pointer,overflow : hidden);$(this.dom.content).css(margin : 0px,padding : 0px);var self = this;/* 初始化组件事件 */ $(this.dom.close_button).click(function() DialogManager.close(self.id););/* 可拖放 */ $(this.do

17、m.wrapper).draggable(handle : this.dom.head);/* 放入文档流 */ $(document.body).append(this.dom.wrapper);,/* 隐藏 */hide : function() $(this.dom.wrapper).hide();,/* 显示 */show : function(pos)if (pos)this.setPosition(pos);/* 锁定屏幕 */ScreenLocker.lock(999);/* 显示对话框 */$(this.dom.wrapper).show();,/* 关闭 */close :

18、function()if (!this.onClose()return false;/* 关闭对话框 */$(this.dom.wrapper).remove();/* 解锁屏幕 */ScreenLocker.unlock();return true;,/* 对话框标题 */setTitle : function(title)$(this.dom.title).html(title);,/* 改变对话框内容 */setContents : function(type, options)contents = this.createContents(type, options);if (typeo

19、f(contents) = string)$(this.dom.content).html(contents);else$(this.dom.content).empty();$(this.dom.content).append(contents);,/* 设置对话框样式 */setStyle : function(style)if (typeof(style) = object)/* 否则为 CSS */$(this.dom.wrapper).css(style);else/* 如果是字符串，则认为是样式名 */ $(this.dom.wrapper).addClass(style);,setWidth : function(width)this.setStyle(width : width + px);,setHeight : function(