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 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
js制作支付倒计时页面
Oct 21 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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 和 XML: 使用expat函数(二)
2006/10/09 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
简单了解Django模板的使用
2017/12/20 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
劳模事迹材料范文
2014/12/24 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技