單擊外部或ESC時關閉模式窗口

Question

我想要在用戶在窗口外單擊或按下鍵盤上的退出時關閉模式窗口。

我已經看過很多有關這個主題的文章，但沒有一篇與我的代碼一起工作。

http://jsfiddle.net/Draven/yCTA3/100/

HTML：

<div class="audio-lg"> 
    <a href="#openAudio" ref="openAudio"> 
     <img src="http://s30.postimg.org/9nq5lwwr5/audio_default_thumbnail.jpg" class="poster" alt="Test Title" width="320px" height="180px"> 
     <span class="play-static"></span> 
    </a> 
</div> 
<div id="openAudio" class="show_player"> 
    <div class="pp_pic_holder" style="display:block"> 
     <div class="ppt" style="opacity:1;display:block;width:500px;height:20px"></div> 
     <div class="pp_content_container"> 
      <div class="pp_content" style="min-height:248px;width:500px"> 
       <div class="pp_fade" style="display:block"> 
        <div id="pp_full_res" style="background-color:black;text-align:center"> 
         <audio class="player" id="player" preload="auto" controls> 
          <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> 
          Your browser does not support the audio element. 
         </audio> 
        </div> 
        <div class="pp_details" style="width:500px"> 
         <p class="pp_description" style="display:block">Test Title</p> 
         <a class="pp_close" href="#" ref="closeAudio" style="color:#fff">Close</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="overlay"></div> 
</div> 

CSS：

.show_player { 
    opacity: 0; 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 530px; 
    visibility: visible; 
} 
.show_player:target { 
    opacity: 1; 
    display: block; 
    top: 0; 
    visibility: visible; 
} 
.show_player .overlay { 
    background: rgba(68,68,68,0.7); 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:10; 
    pointer-events:none 
} 

JQuery的：

$('a[ref=openAudio]').click(function(){ 
    $('#player').get(0).play(); 
}); 
$('a[ref=closeAudio]').click(function(){ 
    $('#player').get(0).pause(); 
}); 

Answer 1

與ESC功能太另一種很好的解決方案。

修訂

$(document).keyup(hideModal); 
$(".overlay").click(hideModal); 


function hideModal(e) { 
    if (e.keyCode === 27 || e.type === 'click') { 
     window.location.hash = "#"; 
    } 

    $('#player').get(0).pause(); 
} 

JSFIDDLE

Answer 2

檢查：http://jsfiddle.net/yCTA3/113/

我正在刪除te覆蓋類的屬性pointer-events：none;

，並添加事件點擊疊加

$(".overlay").click(function(){ 
    window.location.hash = "#"; 
});