jquery点击按钮打开div弹出层，再次点击任意地方关闭弹出层

一个程序员_zhangzhen

已于 2024-02-03 16:24:23 修改

阅读量964

点赞数

分类专栏：前端文章标签： html

于 2020-07-16 16:29:33 首次发布

本文链接：https://blog.csdn.net/qq_22325259/article/details/107385895

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一：纯div写法

先上效果图，这个是纯div

<button type="button" class="blue" id="btnSYWRW" onclick="SYWRW()" style="100px; border:none; color:white;"><span class="iconfont" style="position:relative;top:1px;"></span>&nbsp;首要污染物</button>


<%--首要污染物占比饼图--%>
<div id="SYWRW" style="display:none; position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto; z-index:101;background:rgba(0,0,0,0.7);">
     <div id="echartsSYWRW" style="margin: auto; margin-top: 10px; width:500px;         
          height:500px;">弹出的div</div>
</div>



<script>

function SYWRW() {
            $("#SYWRW").show();
        }

//点击页面其他地方关闭
document.onclick = function (e) {
    //判断点击的地方是否为“更多”按钮和弹出层是否显示
    if (!$(e.target).is("#btnSYWRW") && $("#SYWRW").is(":visible") == true) {
        $("#SYWRW").hide();
    }
}

</script>

二：调用第三方组件layer

效果图

去网上下载相关js组件，应用到项目中

<html>
<head>
<script src="../Js/tableHead.js"></script>
<head>
<body>
<button type="button" class="blue" id="btnSYWRW" onclick="aa()" style="width:95px; border:none; color:white;"><span class="iconfont" style="position:relative;top:1px;"></span>&nbsp;首要污染物</button>

<script>
function aa(data, type) {
            w = $(window).width(); //浏览器时下窗口可视区域宽度 
            h = $(window).height(); //浏览器时下窗口可视区域高度

            //弹窗尺寸
            w1 = w * 0.9;
            h1 = h * 0.9;

            //w = w < 1000 ? 1000 : w * 0.98;

            var dataStr = compileStr(JSON.stringify(data));

            layer.open({
                type: 2,
                title: '',
                shadeClose: true,
                shade: true,
                shade: 0.8,
                area: [w1 + 'px', h1 + 'px'],
                resize: false,
                content: '/Statistics/DataExaminationSYWRW.aspx?data=' + dataStr + '&type=' + type//type 1：1首要污染物占比饼图 2：污染物各因子贡献率
            });
        }
</script>
<body>
<html>

一个程序员_zhangzhen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
jquery点击按钮打开div弹出层，再次点击任意地方关闭弹出层

先上效果图<button type="button" class="blue" id="btnSYWRW" onclick="SYWRW()" style="100px; border:none; color:white;"><span class="iconfont" style="position:relative;top:1px;"></span>&nbsp;首要污染物</button><%--首要污染物占比饼图..
复制链接

扫一扫