建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:12收藏

简介

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

插件特点:

基于 jQuery、bootstrap2,3 进行开发

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

灵活的窗口元素定制

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

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

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

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

丰富的回调函数

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


模态窗口效果图:


可嵌套、高定制化的模态窗口JS插件bDialog-示例图1


消息对话框模式效果图:


可嵌套、高定制化的模态窗口JS插件bDialog-示例图2


遮罩模式效果图:


可嵌套、高定制化的模态窗口JS插件bDialog-示例图3


边角通知窗口效果图:


可嵌套、高定制化的模态窗口JS插件bDialog-示例图4


使用

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