jQuery点击自身以外关闭弹出窗 · 前端开发

jQuery点击自身以为关闭弹出窗 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery点击自身以为关闭弹出窗</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style> *{margin:0;padding:0} #branch{ width:100%; height:auto; } /* 按钮 */ #branch .branch-header button{ margin:300px 600px; } /* 弹出框 */ #branch .branch-proup{ position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,.2); border-radius:5px 5px 0 0; display:none; z-index:10; } #branch .branch-proup-content{ position: fixed; top:50%; left:50%; width:320px; height:320px; background-color:#fff; border:1px solid #ccc; border-radius:5px; margin-top:-160px; margin-left:-160px; } </style> </head> <body> <div id="branch"> <div class="branch-header"> <button>点击出现弹出框</button> </div>  <div class="branch-proup"> <div class="branch-proup-content">  </div> </div> </div> <script type="text/javascript"> $(function(){ //点击按钮 var btn = $('#branch .branch-header button'); //弹出框 var proup = $('#branch .branch-proup'); btn.click(function(){ proup.show(); }) //点击弹窗内容以外的地方关闭弹窗 proup.on('click',function (e) { if($(e.target).closest('#branch .branch-proup-content').length > 0){ alert('弹出框内部被点击了') }else{ alert('弹出框以外的部分被点击了') //关闭弹框 proup.hide() } }); }) </script> </body> </html> ```