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

vx_haonrzz

1180人浏览 · 2020-07-16 16:29:33

vx_haonrzz · 2020-07-16 16:29:33 发布

一：纯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>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模