可多层嵌套的jquery弹出窗口插件 A multiple layer dialog,base on bootstrap

jQuery之家 返回下载页

可多层嵌套高定制化的弹出窗口 支持多层嵌套、高可定制化

由于demo在iframe中进行演示，由于跨域的原因，你可能会看不到正常的演示效果，你可以下载到本地进行测试。

你也可以打开官方演示地址:https://terryz.github.io/bdialog/demo.html进行查看。

基本初始化 

bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	url : 'http://aa.com/load'
});

参数的传递与回传 父窗口与打开窗口之间的数据交互

bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	url : 'http://aa.com/load',
	//传递userName参数给打开的窗口
	params : {
		'userName' : 'zhangsan'
	},
	//关闭窗口后，回传的数据内容将会作为data参数出现在callback函数中，方便进行操作
	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');
		}
	}
});

//在被打开的页面中，使用以下的脚本获得上述传递的userName参数：
var param = bDialog.getDialogParams();
$('#userName').val(param.userName);

多层嵌套打开窗口 打开窗口，在该窗口的基础上再打开新窗口

操作提示 打开窗口后，再次点击“打开窗口”、“打开颜色窗口”、“打开简洁样式窗口”等任意按钮，进行再次打开窗口操作

界面定制化 通过参数打开关闭部分内容

bDialog.open({
	//title属性设置为false，则关闭标题栏
	title : false,
	width : 500,
	height : 450,
	//关闭窗口右上角的关闭按钮
	dialogCloseButton : false,
	//全宽度展示窗口
	fullWidth : true,
	url : 'http://aa.com/load'
});

窗口皮肤使用 仅指定不同样式名称即可完全改变窗口的外观

样式定义：

div.original{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
div.original div.modal-header {
	background-color: white;
	-webkit-border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
}
div.blue{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
div.blue div.modal-header {
	background-color: #0866C6;
}
div.blue div.modal-header h3 {
	color: white;
}
div.blue div.modal-header button.close {
	opacity: 1;
	color: white;
	font-weight: normal;
}
div.simple div.modal-header {
	background-color: white;
	border-bottom: 0px;
}
div.simple div.modal-header h3 {
	display: none;
}
div.simple div.modal-header button.close {
	opacity: 1;
	font-size: 26px !important;
	border: 3px solid white;
	background-color: black;
	width: 40px;
	height: 40px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	color: #EEEEEE;
	text-shadow:none;
	font-weight: normal;
	position: absolute;
	right: -20px;
	top: -25px;
	z-index: 10;
}

脚本代码：

bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	customClass : 'simple'
	url : 'http://aa.com/load'
});

打开页面片段 将页面中已经定义好的HTML内容，放在弹出窗口中展示

浏览器和设备的支持情况

Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。

被支持的浏览器

特别注意，我们坚决支持这些浏览器的最新版本。

<div id="innerContent" class="hide">
	<div>
		<h1 id="support" class="page-header">浏览器和设备的支持情况</h1>
		<p class="lead">Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。</p>
		
		<h2 id="support-browsers">被支持的浏览器</h2>
		<p>特别注意，我们坚决支持这些浏览器的<strong>最新版本</strong>。</p>
	</div>
</div>

//参数1为插件初始化参数，参数2为页面片段模式传递的页面内容
bDialog.open({
	title : '页面片段窗口',
	width : 500,
	height : 450,
},$('#innerContent').html());