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> ```