点击图标弹出二维码,点击页面其他任何地方,弹框隐藏
我们的项目,要求点击微信图标,弹出二维码,点击其他地方,弹框隐藏,然后我就写了下
1 2 3 4 5 | < 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 > |
1 2 3 4 | . 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 ;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //点击微信图标弹出二维码 $( '.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(); } } }); |
好啦,现在就可以实现啦。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步