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

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了前端弹出对话框 js实现ajax交互，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

实现思路：

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

关键细节：

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

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

<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事件。

$(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)了，这个是在网上找到的，在此感谢，代码如下所示：

/ 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="/tag/houtai/" target="_blank" class="keywords">后台</a>返回信息决定该窗口是否展示
 /* 依据返回<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>的前五位，值为close时候不展示 */
 if(data.substr(0,5) == 'close'){
  self.close();
 }
});
/* 先<a href="/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();

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

.btn{ margin:10px 5px; width: 100px; }

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

最后再贴一张效果图吧。

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

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

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作