可嵌套、高定制化的模态窗口JS插件bDialog

简介

bDialog 是基于 Boostrap Modal 功能进行增加、扩展的可多层嵌套、定制灵活的模态窗口。

插件特点：

基于 jQuery、bootstrap2,3 进行开发

可多层嵌套，并拥有各自独立的上下文

灵活的窗口元素定制

可在同一页面下展示各种不同样式、风格的窗口皮肤

浏览器尺寸发生改变时，窗口将自动重新定位到浏览器中心区域

模态窗口区域外点击、窗口自动定位等场景均有相应的提醒动画效果

严格遵守 Bootstrap Modal 原生 HTML 代码结构，可自动适应所有基于 Bootstrap 的风格皮肤

丰富的回调函数

浏览器兼容：IE8+、Chrome、Firefox 等

模态窗口效果图：

消息对话框模式效果图：

遮罩模式效果图：

边角通知窗口效果图：

使用

1.  引入文件

< !-- 插件使用的样式表文件，分bootstrap2和bootstrap3两个环境使用，根据使用环境引用 -- >
< !-- bootstrap2环境使用 -- >
< link rel="stylesheet" href="b.dialog.css" type="text/css" >

< !-- bootstrap3环境使用 -- >
< link rel="stylesheet" href="b.dialog.bootstrap3.css" type="text/css" >

< !-- 拖拽功能库 -- >
< script type="text/javascript" src="jquery-ui.min.js" >< /script>

< !-- 插件核心脚本 -->
< script type="text/javascript" src="b.dialog.js" >< /script>

2.  简单使用

打开一个模态窗口：

bDialog.open({
  title : 'User Info Modify',
  width : 500,
  height : 450,
  url : 'http://aa.com/load',
  params : {'userName' : 'Bryant'},
  callback:function(data){
    if(data && data.results && data.results.length > 0 ){
      bDialog.alert('已完成弹出窗口操作！<br>接收到弹出窗口传回的 userName 参数，值为：<b>' +
      data.results[0].userName + '</b>');
    }else{
      bDialog.alert('弹出窗口未回传参数',$.noop,{
        messageType : 'error'
      });
    }
  }
});

快速上手示例：

//Modal :
bDialog.open({url : 'http://some url'});
bDialog.open({dom : $('#some element').html()});

//Alert :
bDialog.alert('your message');
bDialog.alert('your message',function(){
  //your callback
});

//Mask :
bDialog.mask();

//Toast :
bDialog.toast('your message');
bDialog.toast('your message',{
  //toast dialog type
  messageType : 'warning',
  //show dialog in topleft position
  position : 'topLeft',
  //don't show close button
  dialogCloseButton : false,
  //auto close dialog time(second),default 3s
  closeTime : 0
});

相关链接

中文官网 ：https://terryz.gitee.io/bdialog/

简体中文文档 ：https://github.com/TerryZ/bDialog/blob/master/README-CN.md

GitHub：https://github.com/TerryZ/bDialog

Gitee地址 ：https://gitee.com/TerryZ/bdialog