bootstrap weebox 支持ajax的模态弹出框
前端之家收集整理的这篇文章主要介绍了
bootstrap weebox 支持ajax的模态弹出框，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本篇介绍的bootstrap weeBox（支持ajax的模态弹出框），历经多次修改，目前版本已经稳定，整合了bootstrap的响应式，界面简单，功能却无比丰富，支持ajax、图片预览等等。
bootstrap提供了原生的模态框，但是功能很鸡肋，食之无味弃之可惜，满足不了大众的弹出框需求，其主要缺点是不支持在模态框上弹出新的模态框，这很无趣。为了解决这个痛点，我特地研究了一个叫weeBox的插件，这个原生的模态弹出框也不怎么样，使用起来有很多bug，尤其是不支持响应式。为了解决这两个痛点，结合我的项目，特地整理出新的bootstrap weeBox弹出框，支持响应式。
一、材料准备
我把源码放在了Git上，方便大家下载。
二、效果图
（弹出loading，加载页面，确认后弹出error消息）
三、实例讲解
①、加载资源
<%@ include file="/components/common/taglib.jsp"%>
云梦-项目回报设置
新增项目回报
你可能眨眼一看，怎么没有相关的弹出框呢，只有个a标签？当然了，如果你使用过dwz或者看过我以前的文章（例如Bootstrap summernote，超级漂亮的富文本编辑器），你可能对a标签打开dialog就不会陌生。
通过$.fn.extend加载一个全局的ajaxTodialog 方法，在页面初始化的时候，为a标签执行该方法。
ajaxTodialog 的关键内容就是获取a标签指定的对话框options，比如title（文中为“新增项目回报”）、href（通过该指定的后台请求地址获得remote的view试图，加载到对话框中，后续介绍）、width（为weeBox弹出框设置宽度）、foucs（设置打开时的焦点组件）。
当然还有其他的可选属性，是否展示button等，然后将参数和url传递到weeBox的open方法（核心，后续详细介绍）。
②、bootstrap.weeBox.js(文件偏大，只介绍部分)
0) {
return this.
Boxs.pop();
} else {
return false;
}
};
// 提供给外部的open
方法
this.open = function(content,options) {
self._
opening = true;
if (typeof (options) == "undefined") {
options = {};
}
if (options.
Boxid) {
this.close(options.
Boxid);
}
options.zIndex = this.zIndex;
this.zIndex += 10;
var
Box = new wee
Box(content,options);
Box.dh.click(function() {
self._on
Box = true;
});
this.push(
Box);
return
Box;
};
// 提供给外部的close
方法
this.close = function(id) {
if (id) {
for (var i = 0; i < this.boxs.length; i++) {
if (this.boxs[i].dh.attr('id') == id) {
this.boxs[i].close();
this.boxs.splice(i,1);
}
}
} else {
this.pop().close();
}
};
this.length = function() {
return this.boxs.length;
};
this.getTopBox = function() {
return this.boxs[this.boxs.length - 1];
};
this.find = function(selector) {
return this.getTopBox().dh.find(selector);
};
this.setTitle = function(title) {
this.getTopBox().setTitle(title);
};
this.getTitle = function() {
return this.getTopBox().getTitle();
};
this.setContent = function(content) {
this.getTopBox().setContent(content);
};
this.getContent = function() {
return this.getTopBox().getContent();
};
this.hideButton = function(btname) {
this.getTopBox().hideButton(btname);
};
this.showButton = function(btname) {
this.getTopBox().showButton(btname);
};
this.setButtonTitle = function(btname,title) {
this.getTopBox().setButtonTitle(btname,title);
};
$(window).scroll(function() {
if (self.length() > 0) {
var
Box = self.getTop
Box();
if (
Box.options.position == "center") {
Box.setCenterPosition();
}
}
}).bind("resize",function() {
// 窗口在resize能够使窗口重新居中，模态层的高度和宽度为当前document的大小
if (self.length() > 0) {
// 居中
var
Box = self.getTop
Box();
if (
Box.options.position == "center") {
Box.setCenterPosition();
}
if (
Box.mh) {
// 模态层先隐藏，使document的高度和宽度得到变化
Box.mh.hide();
// 设置模态层新的大小
Box.mh.css({
width :
Box.bwidth(),height :
Box.bheight(),});
// 展示模态层
Box.mh.show();
}
}
});
$(document).click(function() {
if (self.length() > 0) {
var
Box = self.getTop
Box();
if (!self._
opening && !self._on
Box &&
Box.options.clickClose) {
Box.close();
}
}
self._
opening = false;
self._on
Box = false;
});
};
$.extend({
wee
Boxs : new wee
Boxs()
});
这段代码我们可以看得到，页面加载时就会初始化weeBox的基础参数、方法。
通过提供open方法，外部可以将基础的参数options还有url传递到weeBox对象中。
紧接着，weeBox通过new weeBox(content,options)创建weeBox对象，稍候介绍。
然后呢，为了能够产生响应式，weeBox绑定了窗口的resize、scroll，这两个方法很关键，resize是为了窗口在缩放过程中，弹出框的模态层、弹出框能够重新绘制大小和居中，scroll为了弹出矿口始终处于window窗口的中心位置（setCenterPosition，稍候介绍）。
1.setCenterPosition 方法
2.initContent 方法，加载窗口内容
内容
this.initContent = function(content) {
// ok button的名字
self.bo.val(self.options.okBtnName);
// cancel button的名字
self.bc.val(self.options.cancelBtnName);
// 窗口
标题
self.setTitle(self.options.title);
if (!self.options.showTitle) {
self.dheader.hide();
}
if (!self.options.showButton) {
self.df.hide();
}
if (!self.options.showCancel) {
self.bc.hide();
}
if (!self.options.showOk) {
self.bo.hide();
}
if (self.options.contentType == "selector") {
self.selector = self._content;
self._content = $(self.selector).html();
self.setContent(self._content);
// if have check
Box do
var cs = $(self.selector).find(':check
Box');
self.dc.find(':check
Box').each(function(i) {
this.checked = cs[i].checked;
});
$(self.selector).empty();
self.onopen();
self.show();
self.focus();
} else if (self.options.contentType == "ajax") {// content为ajax时，能够将view视图加载到弹出窗口中
self.ajaxurl = self._content;
// loading
self.setContent('
');
self.show();
$.ajax({
type : "post",cache : false,url : self.ajaxurl,success : function(data) {
// 处理view视图数据
var json = YUNM.jsonEval(data);
// 出现error时，
关闭当前窗口，弹出
错误消息
if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
self.close();
$.showErr(json[YUNM.keys.message]);
} else {
// 正常情况下，
显示内容
self._content = data;
self.setContent(self._content);
// 设置打开事件
self.onopen();
// 设置焦点
self.focus();
// 居中
显示
if (self.options.position == 'center') {
self.setCenterPosition();
}
}
},// 通过弹出的对话框
显示错误信息
error : function(xhr,ajaxOptions,thrownError) {
self.close();
YUNM.ajaxError(xhr,thrownError);
}
});
} else if (self.options.contentType == "image") {//
Image类型时，弹出
图片
self.setContent('
');
self.onopen();
self.show();
self.focus();
} else {
self.setContent(self._content);
self.onopen();
self.show();
self.focus();
}
};
").appendTo('body').hide().css({
opacity : self.options.overlay / 100,filter : 'alpha(opacity=' + self.options.overlay + ')',width : self.bwidth(),height : self.bheight(),zIndex : self.options.zIndex - 1
});
}
};
