首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap weebox 支持ajax的模态弹出框

Posted in Javascript onFebruary 23, 2017

本篇介绍的bootstrap weebox（支持ajax的模态弹出框），历经多次修改，目前版本已经稳定，整合了bootstrap的响应式，界面简单，功能却无比丰富，支持ajax、图片预览等等。

bootstrap提供了原生的模态框，但是功能很鸡肋，食之无味弃之可惜，满足不了大众的弹出框需求，其主要缺点是不支持在模态框上弹出新的模态框，这很无趣。为了解决这个痛点，我特地研究了一个叫weebox的插件，这个原生的模态弹出框也不怎么样，使用起来有很多bug，尤其是不支持响应式。为了解决这两个痛点，结合我的项目，特地整理出新的bootstrap weebox弹出框，支持响应式。

一、材料准备

bootstrap weebox

我把源码放在了Git上，方便大家下载。

二、效果图（弹出loading，加载页面，确认后弹出error消息）

bootstrap weebox 支持ajax的模态弹出框
bootstrap weebox 支持ajax的模态弹出框
bootstrap weebox 支持ajax的模态弹出框

三、实例讲解

①、加载资源

<!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下载完整的源码。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

bootstrap weebox 支持ajax的模态弹出框

- Author -

沉默王二

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
Jquery数独游戏解析（一）-页面布局
Nov 05 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
详解element-ui表格中勾选checkbox，高亮当前行
Sep 02 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 #Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 #Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 #Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 #Javascript
jquery实现焦点轮播效果
Feb 23 #Javascript
SVG描边动画
Feb 23 #Javascript
Angular JS 生成动态二维码的方法
Feb 23 #Javascript
Athens(1) 人工智能(2) PyTorch(1) moviepy(1) 模糊匹配(1) FuzzyWuzzy(1) Pyecharts(7) compose(3) opencv(7) 模型保存加载(1)
You might like
web方式ftp
2006/10/09 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
ini_set的用法介绍
2014/01/07 PHP
php检测文件编码的方法示例
2014/04/25 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
php获取微信openid方法总结
2019/10/10 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
2017/09/10 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
深入理解NumPy简明教程---数组3（组合）
2016/12/17 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
Python内置方法和属性应用：反射和单例(推荐)
2020/06/19 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
松下电器美国官方商店：Panasonic美国
2016/10/14 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
优秀员工推荐信
2014/05/10 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
2015年行政部工作总结
2015/04/28 职场文书
文明礼仪倡议书
2015/04/28 职场文书
个人收入证明格式
2015/06/24 职场文书
小学美术教学反思
2016/02/17 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL