弹出层

弹出层

效果演示

组件说明

  • 在页面底部引入脚本http://ossweb-img.qq.com/images/js/milo/milo-min.js（必须放在页面底部，禁止放在head里面）
  • 配置弹出层背景颜色和透明度，即function TGDialogS(e){showDialog.show({id:e,bgcolor:"这里填写背景颜色",opacity:这里填写透明度（0-100）});}，例如bgcolor:"#000",opacity:70
  • 弹出id为test的divTGDialogS("test")，只要将TGDialogS("test")中的test改为相应id即可
  • 关闭弹出层closeDialog();

主要代码

<body>
	<p>弹出id为test1的div：<button onClick="TGDialogS('test1')">点击弹出</button></p>
	<p>弹出id为test2的div：<button onClick="TGDialogS('test2')">点击弹出</button></p>
	<!-- 弹出层test1 Start-->
	<div class="dialog" id="test1" style="display:none">
		<div class="dia-con">我是弹出层test1</div>
		<a class="dia-close" href="javascript:showDialog.hide()" title="关闭">×</a>
	</div>
	<!-- 弹出层test1 End-->
	<!-- 弹出层test2 Start-->
	<div class="dialog" id="test2" style="display:none">
		<div class="dia-con">我是弹出层test2</div>
		<a class="dia-close" href="javascript:showDialog.hide()" title="关闭">×</a>
	</div>
	<!-- 弹出层test2 End-->
	<script src="http://ossweb-img.qq.com/images/js/milo/milo-min.js"></script>
	<script>
		function TGDialogS(e){
			need("biz.dialog-min",function(Dialog){
				Dialog.show({
					id:e,
					bgcolor:'#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
					opacity:50 //弹出“遮罩”的透明度，格式为｛10-100｝，可选
				});
			});
		}
		function closeDialog(){
			need("biz.dialog-min",function(Dialog){
				Dialog.hide();
			});
		}
</script>
</body>

 

showDialog.js版

效果演示

主要代码

<body>
	<a class="dia-btn" href="javascript:showDia();">点击显示弹层</a>
	<div class="dia" id="dia" style="display:none">
		<div class="dia-con">弹出层内容</div>
		<a class="dia-close" href="javascript:showDialog.hide()" title="关闭">×</a>
	</div>
	<script src="http://ossweb-img.qq.com/images/js/comm/showDialog.min.js"></script>
	<script>
		function showDia(){
			showDialog.show({
				id:"dia", //需要弹出的id，如果是弹出页面上的div，则该选项为必选
				bgcolor:"#e3e3e3",//弹出“遮罩”的颜色，格式为"#FF6600"，可选，默认为"#fff"
				opacity:50 //弹出“遮罩”的透明度，格式为｛10-100｝，可选
			});
		}
	</script>
</body>