点击图标弹出二维码,点击页面其他任何地方,弹框隐藏
我们的项目,要求点击微信图标,弹出二维码,点击其他地方,弹框隐藏,然后我就写了下
<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;width: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(); } } });
好啦,现在就可以实现啦。