弹出层以及关闭按钮

作者: 哼_ | 来源:发表于2017-10-23 15:10 被阅读27次

弹出层以及关闭按钮
从“点击别处关闭浮层”了解事件传播机制
【前端案例】15 - 案例：模态框拖拽
layui 踩过的坑系列
纯CSS实现点击弹出关闭遮罩层
前端开发之tap点透浅谈
分享一个非常好用的弹出框小技巧
js弹出遮罩层
click点透
iOS中的坐标转换

<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>
<!--之前写关闭按钮都是直接在js部分写的,不知道可以直接一个a标签href写js,以前只写过后退的js-->
<!-- 弹出层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>