点击图标弹出二维码,点击页面其他任何地方,弹框隐藏

我们的项目,要求点击微信图标,弹出二维码,点击其他地方,弹框隐藏,然后我就写了下

<div class="wechart"></div>
<div class="absolute ewm whitebg" id="ewm">
                <div class="text_sao red font14">扫一扫,你会了解更多</div>
                <div><img src="Images/index/ewm.png" /></div>
            </div>  
.relative { position: relative; }
.absolute { position: absolute; }
.ewm{top:60px;left:50px;200px;padding:20px;box-sizing:border-box;display:none;}
    .text_sao{text-align:center;}
 //点击微信图标弹出二维码
    $('.wechart').on('click', function () {
         $('.ewm').toggle();  //切换元素的可见状态
         return false;
    })
    //点击其他地方,二维码隐藏
     $(document).on({"click": function(e){
                var src = e.target;
                if(src.id && src.id ==="ewm"){
                    return false;
                }else{
                    $('.ewm').hide();
                }
            }
        });

  好啦,现在就可以实现啦。

  

原文地址:https://www.cnblogs.com/eyed/p/8405021.html