雅星平台:bootstrap3 dialog 更强大、更灵活的模态框

时间: 作者:活没

  

[bootstrap,模态框,bootstrap3,dialog]bootstrap3 dialog 更强大、更灵活的模态框

  

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

  

  

一、源码下载  

  

bootstrap3-dialog git下载地址  

  

二、效果展示  

  

1.error警告框  

  

这里写图片描述  

  

2.confirm确认选择框  

  

这里写图片描述  

  

3.Success提示框  

  

这里写图片描述  

  

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

  

这里写图片描述  

  

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

  

这里写图片描述  

  

三、使用方法  

  

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加载远程页面弹出框  

  

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

  

  
  
  点击打开
  
  

对,就这一行代码即可!

  

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

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

  

  

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

  

  
  
  $(function() {  // dialogs  if ($.fn.ajaxTodialog) {  $("a[target=dialog]").ajaxTodialog();  }  });
                    
(责任编辑:admin)
				

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台