[JavaScript知识库] 点击除了弹层的其它位置隐藏弹层/点击弹窗外其它区域隐藏弹窗

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 点击除了弹层的其它位置隐藏弹层/点击弹窗外其它区域隐藏弹窗 -> 正文阅读

[JavaScript知识库]点击除了弹层的其它位置隐藏弹层/点击弹窗外其它区域隐藏弹窗

点击除了弹层的其它位置，怎么隐藏弹层呢？

示例如下：

在这里插入图片描述

js:

$('.com-introduce .share').on('click',function(e){
    $('.share-box').removeClass('hide')
    e.stopPropagation();//阻止事件向上冒泡 
})
$('body').on('click',function(){
    if(!$(".share-box").hasClass("hide")){
        $(".share-box").addClass("hide")
    } 
})

html:

<div class="left-part">            
    <div class="share"><i class="i-share"></i>分享</div>
    <div class="share-box hide"> // css文件别漏了hide样式
       这是个弹层
    </div>
</div>

css:

.com-introduce .con .left-part{position: absolute;left: 0;top:0;}
.com-introduce .con .share{cursor: pointer; width: 63px;height: 24px;margin: 0 auto;line-height: 24px;text-align: center;background: #EBF3FA;border-radius: 12px;font-size: 12px;font-weight: 400;color: #999999;}
.com-introduce .con .i-share{margin-right: 3px; display: inline-block;vertical-align: sub; background: url(i-share@2x.png) no-repeat;background-size: cover; width: 17px;height: 17px;}
.com-introduce .con .share-box{padding: 27px 0 0 25px;position: absolute;bottom: -94px; background: url(share-bg.png) no-repeat;width: 148px;height: 70px;} // 尝试的话可以自行给个背景色来模拟

.hide{display:none;}