bootstrap weebox 支持ajax的模态弹出框
本篇介绍的bootstrap weebox（支持ajax的模态弹出框），历经多次修改，目前版本已经稳定，整合了bootstrap的响应式，界面简单，功能却无比丰富，支持ajax、图片预览等等。
bootstrap提供了原生的模态框，但是功能很鸡肋，食之无味弃之可惜，满足不了大众的弹出框需求，其主要缺点是不支持在模态框上弹出新的模态框，这很无趣。为了解决这个痛点，我特地研究了一个叫weebox的插件，这个原生的模态弹出框也不怎么样，使用起来有很多bug，尤其是不支持响应式。为了解决这两个痛点，结合我的项目，特地整理出新的bootstrap weebox弹出框，支持响应式。
一、材料准备
我把源码放在了Git上，方便大家下载。
二、效果图（弹出loading，加载页面，确认后弹出error消息）
三、实例讲解
①、加载资源
<!DOCTYPE html>
<html lang="zh-CN">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<head>
<title>云梦-项目回报设置</title>
<link type="text/css" rel="stylesheet" href="${ctx}/components/weebox/css/weebox.css" rel="external nofollow" />
<script type="text/javascript" src="${ctx}/components/weebox/js/bgiframe.js"></script>
<script type="text/javascript" src="${ctx}/components/weebox/js/weebox.js"></script>
</head>
<body>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<a href="${ctx}/deal/initAem/${id}" rel="external nofollow" target="dialog" class="btn btn-primary" focus="type" width="600">
<span class="icon-plus"></span>
<span>新增项目回报</span>
</a>
</div>
</div>
<script type="text/javascript">
<!--
$(function() {
$("a[target=dialog]").ajaxTodialog();
});
$.fn.extend({
ajaxTodialog : function() {
return this.each(function() {
var $this = $(this);
$this.click(function(event) {
var title = $this.attr("title") || $this.text();
var options = {};
var w = $this.attr("width");
var h = $this.attr("height");
var maxh = $this.attr("maxh");
if (w)
options.width = w;
if (h)
options.height = h;
if (maxh)
options.maxheight = maxh;
var focus = $this.attr("focus");
if (focus) {
options.focus = focus;
}
options.title = title;
options.contentType = "ajax";
options.showButton = eval($this.attr("showButton") || "false");
options.showCancel = eval($this.attr("showCancel") || "false");
options.showOk = eval($this.attr("showOk") || "false");
options.type = "wee";
options.onopen = eval($this.attr("onopen") || function() {
});
options.boxid = "pop_ajax_dialog";
var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
YUNM.debug(url);
if (!url.isFinishedTm()) {
$.showErr($this.attr("warn") || YUNM._msg.alertSelectMsg);
return false;
}
$.weeboxs.open(url, options);
event.preventDefault();
return false;
});
});
}});
//-->
</script>
</body>
</html>
你可能眨眼一看，怎么没有相关的弹出框呢，只有个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(文件偏大，只介绍部分)
var weeboxs = function() {
var self = this;
this._onbox = false;
this._opening = false;
this.boxs = new Array();
this.zIndex = 999;
this.push = function(box) {
this.boxs.push(box);
};
this.pop = function() {
if (this.boxs.length > 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 weebox(content, options);
box.dh.click(function() {
self._onbox = 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.getTopBox();
if (box.options.position == "center") {
box.setCenterPosition();
}
}
}).bind("resize", function() {
// 窗口在resize能够使窗口重新居中，模态层的高度和宽度为当前document的大小
if (self.length() > 0) {
// 居中
var box = self.getTopBox();
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.getTopBox();
if (!self._opening && !self._onbox && box.options.clickClose) {
box.close();
}
}
self._opening = false;
self._onbox = false;
});
};
$.extend({
weeboxs : new weeboxs()
});
这段代码我们可以看得到，页面加载时就会初始化weebox的基础参数、方法。
通过提供open方法，外部可以将基础的参数options还有url传递到weebox对象中。
紧接着，weebox通过new weebox(content, options)创建weebox对象，稍候介绍。
然后呢，为了能够产生响应式，weebox绑定了窗口的resize、scroll，这两个方法很关键，resize是为了窗口在缩放过程中，弹出框的模态层、弹出框能够重新绘制大小和居中，scroll为了弹出矿口始终处于window窗口的中心位置（setCenterPosition，稍候介绍）。
1.setCenterPosition 方法
// 居中
this.setCenterPosition = function() {
var wnd = $(window), doc = $(document);
// 大小不能超过窗口大小，很关键哦
var iContentW = wnd.width() - 40;
var iContentH = self.options.maxheight || wnd.height() - 100 * 2 - 40;
self.dc.css({
"max-height" : iContentH + 'px',
"max-width" : iContentW + 'px',
});
self.dheader.css({
"max-width" : iContentW + 'px',
});
self.df.css({
"max-width" : iContentW + 'px',
});
// 设置top和left，使窗口居中
self.dh.css({
top : (wnd.height() - self.dh.height()) / 2 + doc.scrollTop(),
left : (wnd.width() - self.dh.width()) / 2 + doc.scrollLeft()
});
};
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 checkbox do
var cs = $(self.selector).find(':checkbox');
self.dc.find(':checkbox').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('<div class="well well-large well-transparent lead"> <i class="icon-spinner icon-spin icon-2x pull-left"></i> 内容加载中... </div>');
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, ajaxOptions, thrownError);
}
});
} else if (self.options.contentType == "image") {// image类型时，弹出图片
self.setContent('<img src=' + self._content + ' ></div>');
self.onopen();
self.show();
self.focus();
} else {
self.setContent(self._content);
self.onopen();
self.show();
self.focus();
}
};
3.initMask ，加载模态层
// 加载模态层
this.initMask = function() {
if (self.options.modal) {
self.mh = $("<div class='dialog-mask'></div>").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
});
}
};
以上提供的这部分代码很关键，无论你使用何种模态弹出框，其核心方法无非上述列出的内容，当然了，文章开头也说了，你可以通过git下载完整的源码。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
ajax分页效果（bootstrap模态框）
ajax分页效果图: 上干货: /** * ajax分页 */ $(function(){ $(".modal-body").find(".pagination").on("click","li",function(){ var totalPage=$(".modal-body").find(".pagination").find(".lilength").lengt
-
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
效果图: 如图,这是使用Validator插件,所完成的功能,效果很强大,也很方便,这边推荐使用这种方式,最后介绍一下原始js验证写法. 首先,导入插件: <link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"
-
AJAX +SpringMVC 实现bootstrap模态框的分页查询功能
一 .效果图 二.JS function getManagerList(dealerId,page2){ macAddress = document.getElementById("activeXDemo").getMac(); $.get("${ctxPath}/common/dealer/manager?"+Math.random(), { page2: page2, pageSize2: 9, dealerId: dealerId, macAddress:ma
-
bootstrap weebox 支持ajax的模态弹出框
本篇介绍的bootstrap weebox(支持ajax的模态弹出框),历经多次修改,目前版本已经稳定,整合了bootstrap的响应式,界面简单,功能却无比丰富,支持ajax.图片预览等等. bootstrap提供了原生的模态框,但是功能很鸡肋,食之无味弃之可惜,满足不了大众的弹出框需求,其主要缺点是不支持在模态框上弹出新的模态框,这很无趣.为了解决这个痛点,我特地研究了一个叫weebox的插件,这个原生的模态弹出框也不怎么样,使用起来有很多bug,尤其是不支持响应式.为了解决这两个痛点,结合
-
Bootstrap源码解读模态弹出框（11）
模态弹出框依赖于Bootstrap提供的js文件,可以单独引入modal.js,也可以直接引入bootstrap.js. 模态弹出框的结构 Bootstrap框架中的模态弹出框,使用了"modal"."modal-dialog"和"modal-content"样式. "modal-content"中是弹出窗真正的内容,主要包括三个部分: 弹出框头部,使用"modal-header",主要包括标题和关闭按钮
-
整理关于Bootstrap模态弹出框的慕课笔记
整理自慕课笔记 插件的源文件:modal.js. 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.如下图所示: <body> <button class="btn btn-primary" type="button">点击我</button> <div cl
-
Yii2.0 模态弹出框+ajax提交表单
如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: <?php echo Html::a('添加请假单', ['create'], ['class' => 'btn btn-success','data-toggle'=>'modal','data-target'=>'#ajax']) ?> 在index视图添加如下代码 来显示模态弹出框: <div class=&q
-
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z-index) z-index 的值越大优先级越高 就会越显示靠前上图的情况就是dialog的 x-index的值大于datepicker的值 上图找到了对应控件的css样式后修改x-index的值直到datepicker 的控件显示在dialog之前: 记住这个x-index的值(假设1100)后
-
Bootstrap实现带动画过渡的弹出框
先看看效果图: 代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>带动画过的渡弹出框</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quo
-
bootstrap modal+gridview实现弹出框效果
项目需要在gridview的表单信息中点击更新,弹出表单进行操作,不需要跳转. 1.在girdview中加入更新操作按钮用来调用modal弹窗 'buttons' => [ 'update' => function ($url, $model, $key) { return Html::a('<span class="glyphicon glyphicon-pencil"></span>', '#', [ 'data-toggle' => 'm
-
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框
-
Bootstrap实现提示框和弹出框效果
首先讲一讲提示框(Tooltip) 的使用方法 样式文件: LESS版本:对应源文件 tooltips.less <style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style> </head> <body> <h3>按钮做的提示框</h3> <button type="button&q
-
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 /