I am looking for a way to close the modal window either when a user clicks outside of it or presses the escape key on the keyboard.
Despite searching through numerous posts on SO regarding this issue, I have been unable to find a solution that works with my specific code.
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;
z-index: 10;
}
.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%;
pointer-events: none;
}
JQuery:
$('a[ref=openAudio]').click(function(){
$('#player').get(0).play();
});
$('a[ref=closeAudio]').click(function(){
$('#player').get(0).pause();
});