页面设置弹窗,点击其他区域,弹窗关闭(案列)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>test</title> </head> <body> <button id="btn">显示</button> <div style="display:none; width:200px; height:200px;margin:100px auto;background-color: #3476ff;color: #fff;text-align: center;line-height: 200px;" id="box"> <div>内层的文字</div> </div> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function(){ $('#btn').click(function(){ $('#box').css('display','block'); }); $(document).on('mousedown',function(e){ if(!$(e.target).is($('#btn')) && !$(e.target).is($('#box')) && $(e.target).parent('#box').length === 0){ $('#box').css('display','none'); } }); }); </script> </body> </html>