微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Ajax作者：编程之家

原本计划实现这样一个需求： 前台点击触发某业务动作，需要用户补充信息，不做跳转页面，弹窗的形式进行补充信息。 折腾出来了，但是最终没有用到。

代码还有些毛躁，提供大概实现逻辑。

实现思路：

在窗口铺上蒙板以屏蔽原窗口功能按钮操作，在蒙板上层绝对定位实现弹窗，弹窗中的数据交互采用ajax方式。 出发弹窗事件用onclick.

关键细节：

弹窗和原窗体本质是同页面，为了描述方便，姑且称底层窗体为父窗体，弹窗为子窗体。为了实现字父窗体的交互，需要在父窗体中做一些特别标签，以便选择器选择，并操作插入新的dom对象。

如此，首先看下父窗体的代码，关键部分我是有注释的。

rush:xhtml;"> <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"> 测试弹窗

<script type="text/javascript" src="script/jquery/jquery.js" charset="utf-8">

<script type="text/javascript" src="script/js/outil.js" charset="utf-8">
<script charset="utf-8" type="text/javascript" src="script/jquery/jquery.ui.js">
<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">
<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;
}

对话测试

接着给出选择器部分代码，也就是outil.js的代码，当然之前的jquery以及jquery ui就不说了。 其核心是绑定click事件。

rush:js;"> jQuery.extend({ getCookie : function(sName) { var aCookie = document.cookie.split("; "); for (var i=0; i < aCookie.length; i++){ var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0]) return decodeURIComponent(aCrumb[1]); } return ''; },setCookie : function(sName,sValue,sExpires) { var sCookie = sName + "=" + encodeURIComponent(sValue); if (sExpires != null) sCookie += "; expires=" + sExpires; document.cookie = sCookie; },removeCookie : function(sName) { document.cookie = sName + "=; expires=Fri,31 Dec 1999 23:59:59 GMT;"; } });

$(function(){
/ dialog 选择并绑定一个新的click事件 /
$('*[ectype="dialog"]').click(function(){
var id = $(this).attr('dialog_id');
var title = $(this).attr('dialog_title') ? $(this).attr('dialog_title') : '';
var url = $(this).attr('uri');
var width = $(this).attr('dialog_width');
ajax_form(id,title,url,width);
return false;
});

});

function drop_confirm(msg,url){
if(confirm(msg)){
window.location = url;
}
}

/ 显示Ajax表单 /
function ajax_form(id,width)
{
if (!width)
{
width = 400;
}
var d = DialogManager.create(id);
d.setTitle(title);
d.setContents('ajax',url);
d.setWidth(width);
d.show('center');

return d;
}

function go(url){
window.location = url;
}

function set_zindex(parents,index){
$.each(parents,function(i,n){
if($(n).css('position') == 'relative'){//alert('relative');
//alert($(n).css('z-index'));
$(n).css('z-index',index);
}
});
}

function js_success(dialog_id)
{
DialogManager.close(dialog_id);
var url = window.location.href;
url = url.indexOf('#') > 0 ? url.replace(/#/g,'') : url;
window.location.replace(url);
}

function js_fail(str)
{
$('#warning').html('<label class="error">' + str + '');
$('#warning').show();
}

function check_pint(v)
{
var regu = /^[0-9]{1,}$/;
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 (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("Universalxpconnect");
} catch (e) {
return false;
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return false;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return false;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsstring);
var copytext = txt;
str.data = copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
}

绑定事件的相关代码就是dialog的核心代码(dialog.js)了，这个是在网上找到的，在此感谢，代码如下所示：

rush:js;"> __DIALOG_WRAPPER__ = {};

/ IE6有个Bug，如果不给定对话框的宽度的话，在IE6下，对话框将以100%宽度显示 /
DialogManager = {
'create' :function(id){
var d = {};
if (!DIALOG_WRAPPER[id])
{
d = new Dialog(id);
DIALOG_WRAPPER[id] = d;
}
else
{
d = DialogManager.get(id);
}
return d;
},'get' :function(id){
return DIALOG_WRAPPER[id];
},'close' :function(id){
if (DIALOG_WRAPPER[id].close())
{
__DIALOG_WRAPPER__[id] = null;
}

},'onClose' :function (){
return true;
},/ 加载对话框样式 /
'loadStyle' :function(){
var _dialog_js_path = $('#dialog_js').attr('src');
var _path = _dialog_js_path.split('/');
var _dialog_css = _path.slice(0,_path.length - 1).join('/') + '/dialog.css';
$('#dialog_js').after('');
}
};
ScreenLocker = {
'style' : {
'position' : 'absolute','top' : '0px','left' : '0px','backgroundColor' : '#000','opacity' : 0.5,'zIndex' : 999
},'masker' : null,'lock' : function(zIndex){
if (this.masker !== null)
{
this.masker.width($(document).width()).height($(document).height());

return true;
}

this.masker = $('

');

/ IE6 Hack /
if ($.browser.msie)
{
$('select').css('visibility','hidden');
}
//var _iframe = $('').css({'opacity':0,'width':'100%','height':'100%'});
//this.masker.append(_iframe);

/ 样式 /
this.masker.css(this.style);

if (zIndex)
{
this.masker.css('zIndex',zIndex);
}

/ 整个文档的宽高 /
this.masker.width($(document).width()).height($(document).height());

$(document.body).append(this.masker);
},'unlock' : function(){
if (this.masker === null)
{
return true;
}
this.masker.remove();
this.masker = null;

/ IE6 Hack /
if ($.browser.msie)
{
$('select').css('visibility','visible');
}
}
};

Dialog = function (id){
/ 构造函数生成对话框代码，并加入到文档中 /
this.id = id;
this.init();
};
Dialog.prototype = {
/ 唯一标识 /
'id' : null,/ 文档对象 /
'dom' : null,'lastPos' : null,'status' : 'complete','onClose' : function (){
return true;
},'tmp' : {},/ 初始化 /
'init' : function(){
this.dom = {'wrapper' : null,'body':null,'head':null,'title':null,'close_button':null,'content':null};

/ 创建外层容器 /
this.dom.wrapper = $('<div id="dialogobject' + this.id + '" class="dialog_wrapper">

').get(0);

/ 创建对话框主体 /
this.dom.body = $('<div class="dialog_body">

').get(0);

/ 创建标题栏 /
this.dom.head = $('<h3 class="dialog_head">').get(0);

/ 创建标题文本 /
this.dom.title = $('<span class="dialog_title_icon">').get(0);

/ 创建关闭按钮 /
//this.dom.close_button = $('<span class="dialog_close_button">close').get(0);

/ 创建内容区域 /
this.dom.content = $('<div class="dialog_content">

').get(0);

/ 组合 /
$(this.dom.head).append('<div class="dialog_ornament1">

<div class="dialog_ornament2">
').append($('<span class="dialog_title">').append(this.dom.title)).append(this.dom.close_button);
$(this.dom.body).append(this.dom.head).append(this.dom.content);
$(this.dom.wrapper).append(this.dom.body).append('<div style="clear:both;display:block;">
');

/ 初始化样式 /
$(this.dom.wrapper).css({
'zIndex' : 9999,'display' : 'none','position' : 'absolute'
});
$(this.dom.body).css({
'position' : 'relative'
});
$(this.dom.head).css({
'cursor' : 'move'
});
$(this.dom.close_button).css({
'position' : 'absolute','text-indent': '-9999px','cursor' : 'pointer','overflow' : 'hidden'
});
$(this.dom.content).css({
'margin' : '0px','padding' : '0px'
});

var self = this;

/ 初始化组件事件 /
$(this.dom.close_button).click(function(){
DialogManager.close(self.id);
});

/ 可拖放 /
$(this.dom.wrapper).draggable({
'handle' : this.dom.head
});

/ 放入文档流 /
$(document.body).append(this.dom.wrapper);
},/ 隐藏 /
'hide' : function(){
$(this.dom.wrapper).hide();
},/ 显示 /
'show' : function(pos){
if (pos)
{
this.setPosition(pos);
}

/ 锁定屏幕 /
ScreenLocker.lock(999);

/ 显示对话框 /
$(this.dom.wrapper).show();
},/ 关闭 /
'close' : function(){
if (!this.onClose())
{
return false;
}
/ 关闭对话框 /
$(this.dom.wrapper).remove();

/ 解锁屏幕 /
ScreenLocker.unlock();

return true;
},/ 对话框标题 /
'setTitle' : function(title){
$(this.dom.title).html(title);
},/ 改变对话框内容 /
'setContents' : function(type,options){

contents = this.createContents(type,options);
if (typeof(contents) == 'string')
{
$(this.dom.content).html(contents);
}
else
{
$(this.dom.content).empty();
$(this.dom.content).append(contents);
}
},/ 设置对话框样式 /
'setStyle' : function(style){
if (typeof(style) == 'object')
{
/ 否则为CSS /
$(this.dom.wrapper).css(style);
}
else
{
/ 如果是字符串，则认为是样式名 /
$(this.dom.wrapper).addClass(style);
}
},'setWidth' : function(width){
this.setStyle({'width' : width + 'px'});
},'setHeight' : function(height){
this.setStyle({'height' : height + 'px'});
},/ 生成对话框内容 /
'createContents' : function(type,options){

var _html = '',self = this,status= 'complete';
if (!options)
{
/ 如果只有一个参数，则认为其传递的是HTML字符串 /
this.setStatus(status);
return type;
}
switch(type){
case 'ajax':
/ 通过Ajax取得HTML，显示到页面上，此过程是异步的 /
$.get(options,{ajax:1},function(data){
if(data.substr(0,1) == '{' && data.substr(data.length - 1,1) == '}'){
var JSON = eval('(' + data + ')');
if(!JSON.done){
self.setContents(JSON.msg);
return;
}
}
self.setContents(data);
/ 使用上次定位重新定位窗口位置 /
self.setPosition(self.lastPos);

 //>>addByZZY20160909: 根据<a href="https://www.jb51.cc/tag/houtai/" target="_blank" class="keywords">后台</a>返回信息决定该窗口是否展示
 /* 依据返回<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>的前五位，值为close时候不展示 */
 if(data.substr(0,5) == 'close'){
  self.close();
 }
});
/* 先<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>正在加载 */
_html = this.createContents('loading',{'text' : 'loading...'});

break;
/ 以下是内置的几种对话框类型 /
case 'loading':
_html = '<div class="dialog_loading"><div class="dialog_loading_text">' + options.text + '

';
status = 'loading';
break;
case 'message':
var type = 'notice';
if (options.type)
{
type = options.type;
}
_message_body = $('<div class="dialog_message_body">');
_message_contents = $('<div class="dialog_message_contents dialogmessage' + type + '">' + options.text + '');
_buttons_bar = $('<div class="dialog_buttons_bar">');
switch (type){
case 'notice':
case 'warning':
var button_name = lang.confirm;
if (options.button_name)
{
button_name = options.button_name;
}
_ok_button = $('');
$(_ok_button).click(function(){
if (options.onclick)
{
if(!options.onclick.call())
{
return;
}
}
DialogManager.close(self.id);
});
$(_buttons_bar).append(_ok_button);
break;
case 'confirm':
var yes_button_name = lang.yes;
var no_button_name = lang.no;
if (options.yes_button_name)
{
yes_button_name = options.yes_button_name;
}
if (options.no_button_name)
{
no_button_name = options.no_button_name;
}
_yes_button = $('');
_no_button = $('');
$(_yes_button).click(function(){
if (options.onClickYes)
{
if (options.onClickYes.call() === false)
{
return;
}
}
DialogManager.close(self.id);
});
$(_no_button).click(function(){
if (options.onClickNo)
{
if (!options.onClickNo.call())
{
return;
}
}
DialogManager.close(self.id);
});
$(_buttons_bar).append(_yes_button).append(_no_button);
break;
}
_html = $(_message_body).append(_message_contents).append(_buttons_bar);

break;
}
this.setStatus(status);

return _html;
},/ 定位 /
'setPosition' : function(pos){
/ 上次定位 /
this.lastPos = pos;
if (typeof(pos) == 'string')
{
switch(pos){
case 'center':
var left = 0;
var top = 0;
var dialog_width = $(this.dom.wrapper).width();
var dialog_height = $(this.dom.wrapper).height();

 /* left=滚动条的宽度 + (当前可视区的宽度 - 对话框的宽度 ) / 2 */
 left = $(window).scrollLeft() + ($(window).width() - dialog_width) / 2;

 /* top =滚动条的高度 + (当前可视区的高度 - 对话框的高度 ) / 2 */
 top = $(window).scrollTop() + ($(window).height() - dialog_height) / 2;

 $(this.dom.wrapper).css({left:left + 'px',top:top + 'px'});
break;

}
}
else
{
var _pos = {};
if (typeof(pos.left) != 'undefined')
{
_pos.left = pos.left;
}
if (typeof(pos.top) != 'undefined')
{
_pos.top = pos.top;
}
$(this.dom.wrapper).css(_pos);
}

},/ 设置状态 /
'setStatus' : function(code){
this.status = code;
},/ 获取状态 /
'getStatus' : function(){
return this.status;
},'disableClose' : function(msg){
this.tmp['oldOnClose'] = this.onClose;
this.onClose = function(){
if(msg)alert(msg);
return false;
};
},'enableClose' : function(){
this.onClose = this.tmp['oldOnClose'];
this.tmp['oldOnClose'] = null;
}
};

//RemoveByZZY20160909: 手动引入样式文件
//DialogManager.loadStyle();

好了，以上就是核心逻辑及代码实现，代码很好的解释了整个过程，没必要浪费文字了。这里面把子窗体我再贴下。

rush:xhtml;">

这里展示的内容可以是表单或非表单等内容。

最后再贴一张效果图吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

js实现ajax交互js弹出对话框js弹出框

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot