前端弹出对话框 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
/htm
显示全部