前端弹出对话框js实现ajax交互.doc

前端弹出对话框 js实现 ajax交互 原本计划实现这样一个需求： 前台点击触发某业务动作，需要用户补充信息，不做跳转页面，弹窗的形式进行补充信息。 折腾出来了，但是最终没有用到。 　　代码还有些毛躁，提供大概实现逻辑。 实现思路：　　在窗口铺上蒙板以屏蔽原窗口功能按钮操作，在蒙板上层绝对定位实现弹窗，弹窗中的数据交互采用ajax方式。 出发弹窗事件用onclick. 关键细节：　　弹窗和原窗体本质是同页面，为了描述方便，姑且称底层窗体为父窗体，弹窗为子窗体。为了实现字父窗体的交互，需要在父窗体中做一些特别标签，以便选择器选择，并操作插入新的dom对象。 如此，首先看下父窗体的代码，关键部分我是有注释的。 复制代码 html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 meta name=viewport content=initial-scale=1.0, user-scalable=no meta name=apple-mobile-web-app-capable content=yes meta name=apple-mobile-web-app-status-bar-style content=black title测试弹窗/title script type=text/javascript src=script/jquery/jquery.js charset=utf-8/script script type=text/javascript src=script/js/outil.js charset=utf-8/script script charset=utf-8 type=text/javascript src=script/jquery/jquery.ui.js/script link rel=stylesheet type=text/css href=script/jquery/themes/ui-lightness/jquery.ui.css script charset=utf-8 type=text/javascript src=script/dialog/dialog.js id=dialog_js/script link href=script/dialog/dialog.css rel=stylesheet 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 class=content a href=javascript:void(0); ectype=dialog dialog_id=dialog_test dialog_title=对话测试 dialog_width=300 uri=pop_son.html 对话测试 /a /div /body /html 复制代码 接着给出选