可多层嵌套的jquery弹出窗口插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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