原本计划实现这样一个需求： 前台点击触发某业务动作，需要用户补充信息，不做跳转页面，弹窗的形式进行补充信息。 折腾出来了，但是最终没有用到。 代码还有些毛躁，提供大概实现逻辑。实现思路： 在窗口铺上蒙板以屏蔽原窗口功能按钮操作，在蒙板上层绝对定位实现弹窗，弹窗中的数据交互采用 ...
原本计划实现这样一个需求： 前台点击触发某业务动作，需要用户补充信息，不做跳转页面，弹窗的形式进行补充信息。 折腾出来了，但是最终没有用到。
代码还有些毛躁，提供大概实现逻辑。
实现思路： 在窗口铺上蒙板以屏蔽原窗口功能按钮操作，在蒙板上层绝对定位实现弹窗，弹窗中的数据交互采用ajax方式。 出发弹窗事件用onclick.
关键细节： 弹窗和原窗体本质是同页面，为了描述方便，姑且称底层窗体为父窗体，弹窗为子窗体。为了实现字父窗体的交互，需要在父窗体中做一些特别标签，以便选择器选择，并操作插入新的dom对象。
如此，首先看下父窗体的代码，关键部分我是有注释的。
<html ="http://www.w3.org/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='/images/loading.gif' data-original="script/jquery/jquery.js" charset="utf-8"></script> <script type="text/javascript" src='/images/loading.gif' data-original="script/js/outil.js" charset="utf-8"></script> <script charset="utf-8" type="text/javascript" src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：前端弹出对话框 js实现 ajax交互
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
