bDialog是一款可多层嵌套高定制化的jquery弹出窗口插件。它是基于Boostrap Modal开发的可多层嵌套、定制灵活的模态窗口。支持Bootstrap2、Bootstrap3。bDialog的特点还有:
- 基于jQuery、bootstrap2,3进行开发。
- 可多层嵌套,并拥有各自独立的上下文。
- 灵活的窗口元素定制。
- 可在同一页面下展示各种不同样式、风格的窗口皮肤。
- 丰富的回调函数。
- 兼容IE8+浏览器。
使用方法
插件使用的样式表文件,分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">
引入jquery,jqueryui和b.dialog.js文件。
<!-- jquery -->
<script type="text/javascript" src="jquery.min.js" ></script>
<!-- 拖拽功能库 -->
<script type="text/javascript" src="jquery-ui.min.js" ></script>
<!-- 插件核心脚本 -->
<script type="text/javascript" src="b.dialog.js"></script>
初始化插件
bDialog最基本的初始化代码如下:
//初始化插件
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('已完成弹出窗口操作!<br>接收到弹出窗口传回的 userName 参数,值为:<b>'
+ data.results[0].userName + '</b>');
}else{
eDialog.alert('弹出窗口未回传参数',$.noop,'error');
}
}
});
bDialog弹出窗口插件的官方主页地址为:https://terryz.github.io/bdialog/index.html
版权声明
文章来源: https://www.uihtm.com/jquery/9514.html
版权说明:仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。我们非常重视版权问题,如有侵权请邮件(44784009#qq.com)与我们联系处理。敬请谅解!