弹出层
使用场景：PC端和移动端
弹出一个块元素（如：div等）或iframe（如果域名不同需要在子页面和父页面添加document.domain=”qq.com”）背部是“遮罩”效果。
[warning] 注意
- milo版和非milo版本不要一起使用
milo 版本
在页面中现引入milo库，然后使用milo的need方法引入showdialog组件； 关于更详细的milo库使用方法可以查看Milo库使用说明
组件CDN
<!-- PC端milo -->
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<!-- 移动端milo -->
<script src="//ossweb-img.qq.com/images/js/mobile_bundle/milo.js"></script>
效果演示
示例代码
<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="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script>
function TGDialogS(e){
// 利用milo库引入dialog组件
need("biz.dialog",function(Dialog){
Dialog.show({
id:e,
bgcolor:'#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
opacity:50 //弹出“遮罩”的透明度，格式为｛10-100｝，可选
});
});
}
function closeDialog(){
// 利用milo库引入dialog组件
need("biz.dialog",function(Dialog){
Dialog.hide();
});
}
</script>
</body>
API
show
显示弹出层，具体参数说明如下
// 利用milo库引入dialog组件
need("biz.dialog",function(Dialog){
Dialog.show({
id:e,
bgcolor:'#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
opacity:50 //弹出“遮罩”的透明度，格式为｛10-100｝，可选
});
});
hide
关闭弹出层
// 利用milo库引入dialog组件
need("biz.dialog",function(Dialog){
Dialog.hide();
});
参数说明
[success] 提醒
- src（iframe模式）、sMsg（Message模式）、id（Dialog模式）三个参数只能传一个，多个时以第一个为准。
- id : string 需要弹出的容器ID，（弹出元素为块元素时）
- bgcolor : string 遮罩层的颜色，默认为"#fff"
- opacity : number 遮罩层的透明度，值为10-100
- src : string 需要弹出的iframe的路径，（弹出元素为iframe时）
- Width : number 弹出iframe的宽度，（弹出元素为iframe时）
- Height : number | string 弹出iframe的高度，（弹出元素为iframe时）
- sMsg : string 弹出内容可以为文本（弹出类型为
Message，弹出内容为文本） - sStyle : string 自定义消息框的样式
- sClass : string 自定义消息框的样式类名
- sTime : number 多少秒后自动关闭，默认为点击弹出框以外的“遮罩”关闭(只有在类型为
Message时生效) - fixed : boolean 是否需要固定弹出对象不随滚动条滚动，fixed为ture的时候，不随滚动条滚动
- iTop : number fixed为true的时候，弹出对象距离浏览器顶部的距离，默认居中
- sPzIndex : number 弹出层的z-index,可定义，最小为9，最大9999
- isNoAccessible : boolean 是否关闭对无障碍支持（如esc关闭、默认焦点、tab焦点切换等等）
- onPopupCallback : function 在弹出框弹出前运行这个函数
- onCloseCallback : function 在弹出框关闭后运行这个函数
showDialog.js版
组件CDN
<script src="//ossweb-img.qq.com/images/js/comm/showDialog.min.js"></script>
效果演示
示例代码
<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="//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>