可多层嵌套、高定制化的模态窗口 bDialog

MIT
JavaScript HTML/CSS
跨平台
2017-06-21
TerryZ

可多层嵌套、高定制化的模态窗口bDialog

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

 

效果预览

模态窗口效果图:

 

消息对话框模式效果图:

遮罩模式效果图:

边角通知窗口效果图:

 

bDialog使用入门指南、Demo、文档

更多实例、文档请访问:

https://terryz.github.io/bdialog/index.html

项目GitHub地址:

https://github.com/TerryZ/bDialog

如果您觉得项目还不错,还请给项目(Github / 码云)加个Star,以支持鼓励作者的工作

 

 

功能特点

  • 基于jQuery、bootstrap2,3进行开发

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

  • 灵活的窗口元素定制

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

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

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

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

  • 丰富的回调函数

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

插件基于jQuery开发,建议在Bootstrap环境下使用,目前支持Bootstrap2、Bootstrap3

窗口模式:

  • 模态窗口(Modal)

  • 消息对话框(Alert)

  • 遮罩(Mask)

  • 边角通知窗口(Toast)

 

 

目标用户群体

bDialog开发之初,目的是为了统一开发团队对于Bootstrap Modal的使用方式,例如统一设置背景点击不关闭窗口,关闭底部按钮区域,统一设置参数接收,回调函数等基础功能;后续更是着重解决了窗口多层嵌套打开的功能需求,尤其是解决了该死的IE8下多层打开会导致浏览器崩溃的问题。

插件针对在项目中使用了Bootstrap作为基础UI框架,同时更希望使用Bootstrap原生态组件的群体。

Bootstrap原生提供的功能组件,功能性相对较弱,bDialog并不重新造轮子,而是在原生组件的基础上进行功能加强、扩展,使得更符合开发上的功能需求,通过不断的功能完善和问题修复,bDialog插件就一直更新到了现在。几年来经过多个团队和多个项目的使用,将项目进行开源,希望项目可以让更多的团队,个人受益。

 

怎么使用bDialog

在 Github 或 码云 上下载最新的版本,解压后并放入需要使用的项目中

或使用 npm 指令 

npm install bdialog

资源导入

< !-- 插件使用的样式表文件,分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>

Javascript初始化插件

//初始化插件
bDialog.open({
    title : '窗口标题',
    width : 500,
    height : 450,
    url : 'http://aa.com/load',
    params : {
        'userName' : 'zhangsan'
    },
    callback:function(data){
        if(data && data.results && data.results.length > 0 ){
            eDialog.alert('已完成弹出窗口操作!
接收到弹出窗口传回的 userName 参数,值为:' + data.results[0].userName + ''); }else{ eDialog.alert('弹出窗口未回传参数',$.noop,'error'); } } });

 

 

 

 

 

 

 

加载中

评论(7)

TerryZ
TerryZ 软件作者
自己支持一下!
还没有名字
还没有名字
打开N多窗口后页面发黑
taolive
taolive
根本不是一个两级
Jokeny
Jokeny
还行,已star
莫默磨墨先生
莫默磨墨先生
不错,已 star
CapJes
CapJes
挺不错的。
宇润
宇润
把layer置于何地?

bDialog v2.1 发布,增加边角通知窗口

弹出窗口插件 bDialog v2.1 已发布,更新内容: 增加带文本输入框的 Alert confirm 消息对话窗口 增加 Alert 模式下回车键关闭窗口的功能 增加 Toast边角显示的通知窗口,支持 info, warnin...

2017/09/18 09:24

bDialog v2.0 发布,增加消息对话框、遮罩等新功能

下拉分页选择插件 bDialog v2.0 发布了,插件更新内容: 修复窗口最大化后,内部iframe高度没有最大化的问题 重构代码结构 增加窗口打开后的动画效果 增加国际化多语言支持 增加bDialog.ale...

2017/09/04 10:58

bDialog v1.2 发布,可多层嵌套、高定制化的模态窗口

bDialog v1.2 已发布 更新内容: 增加窗口最大化功能 增加dialogMaxButton配置项目,设置是否启用最大化窗口按钮,默认:true 修正部分样式问题 模态窗口区域外点击,会有窗口晃动的动画提醒...

2017/08/06 14:46

bDialog v1.1发布,可多层嵌套、高定制化的模态窗口

bDialog v1.1 已发布 更新内容: 修复窗口最小高度限制的Bug 修复部分问题 插件介绍: 可多层嵌套、高定制化的模态窗口 基于Boostrap Modal开发的可多层嵌套、定制灵活的模态窗口 功能特点 ...

2017/07/20 17:01

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

暂无博客

返回顶部
顶部