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

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

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

实现思路：

关键细节：

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

/ 创建标题栏 /
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: 根据后台返回信息决定该窗口是否展示
 /* 依据返回内容的前五位，值为close时候不展示 */
 if(data.substr(0,5) == 'close'){
  self.close();
 }
});
/* 先提示正在加载 */
_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();

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

最后再贴一张效果图吧。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!