《前端弹出对话框js实现ajax交互剖析》由会员分享,可在线阅读,更多相关《前端弹出对话框js实现ajax交互剖析(16页珍藏版)》请在金锄头文库上搜索。
1、前端弹出对话框 js实现 ajax交互原本计划实现这样一个需求: 前台点击触发某业务动作,需要用户补充信息,不做跳转页面,弹窗的形式进行补充信息。 折腾出来了,但是最终没有用到。代码还有些毛躁,提供大概实现逻辑。实现思路:在窗口铺上蒙板以屏蔽原窗口功能按钮操作,在蒙板上层绝对定位实现弹窗,弹窗中的数据交互采用ajax方式。 出发弹窗事件用onclick.关键细节:弹窗和原窗体本质是同页面,为了描述方便,姑且称底层窗体为父窗体,弹窗为子窗体。为了实现字父窗体的交互,需要在父窗体中做一些特别标签,以便选择器选择,并操作插入新的dom对象。 如此,首先看下父窗体的代码,关键部分我是有注释的。复制代码
2、 测试弹窗 * 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:1
3、4px; 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);function js_fail(str) $(#warning)
4、.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 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 (scape)