├── .gitattributes ├── logo ├── logo.png ├── horizontal.png └── vertical.png ├── .travis.yml ├── package.json ├── LICENSE ├── README-CN.md ├── README.md ├── b.dialog.min.js ├── b.dialog.css ├── b.dialog.bootstrap3.css ├── b.dialog.js └── jquery-ui.min.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.css linguist-language=javascript 2 | -------------------------------------------------------------------------------- /logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TerryZ/bDialog/HEAD/logo/logo.png -------------------------------------------------------------------------------- /logo/horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TerryZ/bDialog/HEAD/logo/horizontal.png -------------------------------------------------------------------------------- /logo/vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TerryZ/bDialog/HEAD/logo/vertical.png -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - stable 5 | script: 6 | - npm install -g grunt-cli 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bdialog", 3 | "version": "2.1.0", 4 | "description": "A multi-layer nested, highly customizable powerful dialog plugin, dialog type including modal, alert, mask and toast types", 5 | "main": "b.dialog.js", 6 | "scripts": { 7 | "test": "grunt eslint" 8 | }, 9 | "dependencies": { 10 | "jquery": "^1.10.2" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/TerryZ/bDialog.git" 15 | }, 16 | "keywords": [ 17 | "jquery", 18 | "bootstrap", 19 | "dialog", 20 | "alert", 21 | "multiple-layers", 22 | "notifications", 23 | "modal", 24 | "mask", 25 | "toast", 26 | "jquery-plugin", 27 | "ui" 28 | ], 29 | "author": "TerryZ", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/TerryZ/bDialog/issues" 33 | }, 34 | "homepage": "https://github.com/TerryZ/bDialog#readme" 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Terry Zeng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-CN.md: -------------------------------------------------------------------------------- 1 |

bDialog

2 | 3 | # bDialog 4 | 5 | 基于Boostrap Modal开发的可多层嵌套、定制灵活的模态窗口 6 | 7 | ## 入门指南、DEMO、文档 8 | 9 | 更多实例、文档请访问: 10 | - [English official site](https://terryz.github.io/bdialog/index.html) 11 | - [国内站点](https://terryz.gitee.io/bdialog/index.html) 12 | 13 | VueJS版本: [v-dialogs](https://github.com/TerryZ/v-dialogs) 14 | 15 | ## 如果您觉得项目还不错,还请给项目(github/码云)加个Star 16 | 17 | ## 插件预览 18 | 19 | **模态窗口模式** 20 | ![bDialog](https://terryz.github.io/image/bDialog.png) 21 | **消息对话框模式** 22 | ![bDialogAlert](https://terryz.github.io/image/bDialogAlert.png) 23 | **遮罩模式** 24 | ![bDialogMask](https://terryz.github.io/image/bDialogMask.png) 25 | **边角通知窗口模式** 26 | ![bDialogToast](https://terryz.github.io/image/bDialogToast.png) 27 | 28 | ## 主要特性 29 | 30 | 44 | 45 | ## 目标用户群体 46 | 47 | 插件针对在项目中使用了Bootstrap作为基础UI框架,同时更希望使用Bootstrap原生态组件的群体。 48 | 49 | bDialog开发之初,目的是为了统一开发团队对于Bootstrap Modal的使用方式,例如统一设置背景点击不关闭窗口,关闭底部按钮区域,统一设置参数接收,回调函数等基础功能;后续更是着重解决了窗口多层嵌套打开的功能需求,尤其是解决了该死的IE8下多层打开会导致浏览器崩溃的问题。 50 | 51 | Bootstrap原生提供的功能组件,功能性相对较弱,bDialog并不重新造轮子,而是在原生组件的基础上进行功能加强、扩展,使得更符合开发上的功能需求,通过不断的功能完善和问题修复,bDialog插件就一直更新到了现在。几年来经过多个团队和多个项目的使用,将项目进行开源,希望项目可以让更多的团队,个人受益。 52 | 53 | 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

bDialog

4 | 5 |

bDialog

6 | 7 |

8 | A multi-layer nested, highly customizable powerful dialog plugin,
9 | dialog type including modal dialog, alert dialog, mask layer, toast dialog 10 |

11 | 12 |

13 | 14 | 15 | 16 | 17 |

18 | 19 |

20 | 21 | ## Guide, Demos and Documents 22 | 23 | Explorer on 24 | - [English site](https://terryz.github.io/docs-jq/dialog) 25 | - [中文官网](https://terryz.gitee.io/bdialog) 26 | 27 | [简体中文文档](README-CN.md) 28 | 29 | The Vuejs version: [v-dialogs](https://github.com/TerryZ/v-dialogs) 30 | 31 | **If you think this project is helpful, please star it.** 32 | 33 |

34 | 35 | 36 | ## Features 37 | 38 | - jQuery plugin, on Bootstrap Modal plugin basis to extend 39 | - multi-layer Nested modal dialog 40 | - alert mode dialog provide `info`、`warning`、`error`、`success`、`confirm` types 41 | - mask layer block all element when data loading 42 | - toast dialog, provide `info`、`warning`、`error`、`success` types and 6 corner position 43 | - flexible style setting 44 | - when browser size changes, the dialog will automatically repositioned to the center of the browser 45 | - dialog area outside the click, the window automatically positioning and other scenes have a corresponding reminder animation 46 | 47 |

48 | 49 | ### The Alert Dialog Icon 50 | 51 | the icons in alert dialog used are made by [Elegant Themes](http://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free) 52 | and control icon, toast icon used are come from [IconFont](http://www.iconfont.cn) 53 | 54 |

55 | 56 | ## Plugin Preview 57 | 58 | *Modal Mode* 59 | 60 | ![bDialogModal](https://terryz.gitee.io/image/bDialog.png) 61 | 62 | *Alert Mode* 63 | 64 | ![bDialogAlert](https://terryz.gitee.io/image/bDialogAlert.png) 65 | 66 | *Mask Mode* 67 | 68 | ![bDialogMask](https://terryz.gitee.io/image/bDialogMask.png) 69 | 70 | *Toast Mode* 71 | ![bDialogToast](https://terryz.gitee.io/image/bDialogToast.png) 72 | 73 | 74 |

75 | 76 |



77 | 78 | ## Install 79 | 80 | download bDialog plugin zip file by last release, or [Click me](https://github.com/TerryZ/bDialog/archive/master.zip) to download bDialog 81 | 82 | or use **NPM** 83 | ``` 84 | npm i bdialog 85 | ``` 86 | 87 | ### Usage 88 | 89 | As you can see in the [Demo page](https://terryz.github.io/docs-jq/dialog/demo.html), you will need to include: 90 | 91 | - [jQuery library](http://jquery.com) (1.6.0+), untest on jquery2.x & 3.x 92 | - The JavaScript file b.dialog.js (or its minified version b.dialog.min.js) 93 | - The css file b.dialog.bootstrap3.css for bootstrap3.x , b.dialog.css for bootstrap2.x 94 | 95 | #### Including files 96 | 97 | ```html 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |