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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 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编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
php事件驱动化设计详解
2016/11/10 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
详解Python正则表达式re模块
2019/03/19 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python如何实现代码检查
2019/06/28 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
竞聘书模板
2014/03/31 职场文书
教师业务培训方案
2014/05/01 职场文书
学习考察心得体会
2014/09/04 职场文书
初二学生评语大全
2014/12/26 职场文书
教导主任个人总结
2015/03/03 职场文书
导师工作推荐信
2015/03/27 职场文书