bootstrap3 dialog 更强大、更灵活的模态框


Posted in Javascript onApril 20, 2017

用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很。但nakupanda开源作者封装了一个更强大、更灵活的模态框——bootstrap3-dialog。

一、源码下载

bootstrap3-dialog git下载地址

二、效果展示

1.error警告框

bootstrap3 dialog 更强大、更灵活的模态框

2.confirm确认选择框

bootstrap3 dialog 更强大、更灵活的模态框

3.Success提示框

bootstrap3 dialog 更强大、更灵活的模态框

4.ajax加载远程页面弹出框

bootstrap3 dialog 更强大、更灵活的模态框

5.ajax加载自定义页面弹出框

bootstrap3 dialog 更强大、更灵活的模态框

三、使用方法

bootstrap3-dialog的demo中已有很详细的介绍,但对于初学者来说是个麻烦,还要一个一个方法和注释去看。但我对这些常用的方法进行了新的封装,所以就简便了很多。
引入js和css文件我就不多说了,直接说使用方法。

①、error警告框

//弹出错误提示的登录框
$.showErr = function(str, func) {
 // 调用show方法
 BootstrapDialog.show({
  type : BootstrapDialog.TYPE_DANGER,
  title : '错误 ',
  message : str,
  size : BootstrapDialog.SIZE_SMALL,//size为小,默认的对话框比较宽
  buttons : [ {// 设置关闭按钮
   label : '关闭',
   action : function(dialogItself) {
    dialogItself.close();
   }
  } ],
  // 对话框关闭时带入callback方法
  onhide : func
 });
};

这样封装后,需要弹出error警告框的时候直接使用$.showErr("当日没有资金日报")即可。

②、confirm确认选择框

$.showConfirm = function(str, funcok, funcclose) {
 BootstrapDialog.confirm({
  title : '确认',
  message : str,
  type : BootstrapDialog.TYPE_WARNING, // <-- Default value is
  // BootstrapDialog.TYPE_PRIMARY
  closable : true, // <-- Default value is false,点击对话框以外的页面内容可关闭
  draggable : true, // <-- Default value is false,可拖拽
  btnCancelLabel : '取消', // <-- Default value is 'Cancel',
  btnOKLabel : '确定', // <-- Default value is 'OK',
  btnOKClass : 'btn-warning', // <-- If you didn't specify it, dialog type
  size : BootstrapDialog.SIZE_SMALL,
  // 对话框关闭的时候执行方法
  onhide : funcclose,
  callback : function(result) {
   // 点击确定按钮时,result为true
   if (result) {
    // 执行方法
    funcok.call();
   }
  }
 });
};

通过$.showConfirm(title, _doPost);进行调用。

③、Success提示框

$.showSuccessTimeout = function(str, func) {
 BootstrapDialog.show({
  type : BootstrapDialog.TYPE_SUCCESS,
  title : '成功 ',
  message : str,
  size : BootstrapDialog.SIZE_SMALL,
  buttons : [ {
   label : '确定',
   action : function(dialogItself) {
    dialogItself.close();
   }
  } ],
  // 指定时间内可自动关闭
  onshown : function(dialogRef) {
   setTimeout(function() {
    dialogRef.close();
   }, YUNM._set.timeout);
  },
  onhide : func
 });
};

④、ajax加载远程页面弹出框

首先,我们先来看如何使用。

<a href="${ctx}/common/showSendMessage" rel="external nofollow" rel="external nofollow" target="dialog">点击打开</a>

对,就这一行代码即可!

  1. 一个a标签
  2. 一个href属性指向远程页面
  3. target属性设置为dialog

不过,我们需要做一下封装。

第一步,页面加载时,我们需要让a标签执行ajaxTodialog方法。

$(function() {
 // dialogs
 if ($.fn.ajaxTodialog) {
  $("a[target=dialog]").ajaxTodialog();
 }
});

第二步,封装ajaxTodialog方法。

$.fn.extend({
 ajaxTodialog : function() {
  return this.click(function(event) {
   var $this = $(this);
   YUNM.debug("ajaxTodialog" + $this.selector);
   var title = $this.attr("title") || $this.text();
   var url=$this.attr("href");
   $.ajax({
    type : 'POST',
    url : url,
    cache : false,
    success : function(response) {
     ajaxDialog = BootstrapDialog.show({
      message : function(dialog) {
       var $message = $('<div></div>');
       $message.html(response);// 把传回来的页面作为message返回
       return $message;
      },
      title : title,
    }
   });
   event.preventDefault();
   return false;
  });
 },
});

⑤、ajax加载自定义页面弹出框

⑤和④类似,不过有些区别,下面只把区别列出来。

使用方法上,需要加上manipulating=”1”,指明为自定义页面,不使用bootstrap dialog的header、footer。

<a href="${ctx}/common/showSendMessage" rel="external nofollow" rel="external nofollow" target="dialog" manipulating="1">自定义页面</a>

ajaxTodialog方法中增加对manipulating=1的处理。

if (manipulating == 1) {
 ajaxDialog = new BootstrapDialog({
  message : function(dialog) {
   var $message = $('<div></div>');
   $message.html(response);

   return $message;
  },
  // 找到自定义页面上x号进行绑定close事件
  onshown : function(dialogRef) {
   var $button = dialogRef.getModalContent().find('button[data-widget="remove"]');
   $button.on('click', {
    dialogRef : dialogRef
   }, function(event) {
    event.data.dialogRef.close();
   });
  },
 });
 ajaxDialog.realize();
 ajaxDialog.getModalHeader().hide();// header不要
 ajaxDialog.getModalFooter().hide();// footer也不要
 ajaxDialog.getModalBody().css('padding', 0);// 无填充
 ajaxDialog.open();
}

以上所述是小编给大家介绍的bootstrap3 dialog 更强大、更灵活的模态框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 #Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 #Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 #Javascript
基于JavaScript实现活动倒计时效果
Apr 20 #Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 #Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
通过js修改input、select默认字体颜色
Apr 19 #Javascript
You might like
php正则表达式(regar expression)
2011/09/10 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
javascript编写简易计算器
2017/05/06 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
在python中实现对list求和及求积
2018/11/14 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
大三在校生电子商务求职信
2013/10/29 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
青年志愿者活动感想
2015/08/07 职场文书
体育部部长竞选稿
2015/11/21 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
Python实现仓库管理系统
2022/05/30 Python