前端弹出对话框js实现ajax交互剖析.docx
《前端弹出对话框js实现ajax交互剖析.docx》由会员分享,可在线阅读,更多相关《前端弹出对话框js实现ajax交互剖析.docx(19页珍藏版)》请在冰豆网上搜索。
前端弹出对话框js实现ajax交互剖析
前端弹出对话框js实现ajax交互
原本计划实现这样一个需求:
前台点击触发某业务动作,需要用户补充信息,不做跳转页面,弹窗的形式进行补充信息。
折腾出来了,但是最终没有用到。
代码还有些毛躁,提供大概实现逻辑。
实现思路:
在窗口铺上蒙板以屏蔽原窗口功能按钮操作,在蒙板上层绝对定位实现弹窗,弹窗中的数据交互采用ajax方式。
出发弹窗事件用onclick.
关键细节:
弹窗和原窗体本质是同页面,为了描述方便,姑且称底层窗体为父窗体,弹窗为子窗体。
为了实现字父窗体的交互,需要在父窗体中做一些特别标签,以便选择器选择,并操作插入新的dom对象。
如此,首先看下父窗体的代码,关键部分我是有注释的。
复制代码
//www.w3.org/1999/xhtml">
测试弹窗
*{
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:
0auto;
}
.content{
border:
#cccsolid1px;margin:
60px10px10px;background:
#fff;overflow:
hidden;
color:
#6b6b6b;
font-size:
14px;border-radius:
5px;
}
--选择器是通过ectype="dialog"来进行选择的-->
void(0);"ectype="dialog"dialog_id="dialog_test"dialog_title="对话测试"dialog_width="300"uri="pop_son.html">
对话测试