How to close modal window?

This code works fine with an iframe of an online movie. The problem when closing modal closes the window, but the audio continues to scroll in the background. Who can handle this code here?

<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(9, 9, 9, 1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
 .modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 800px;
position: relative;
margin: 5% auto;

-moz-box-shadow: 1px 1px 30px #000;
-webkit-box-shadow: 1px 1px 30px #000;
box-shadow: 1px 1px 30px #000;
}
 .close {
background: #606061;
display: block;
// Botão de pause
close.onPress = function(){
    close.modalDialog();
}
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
.modalpic {
float: left;
padding: 10px;
width: 300px;
display: block;
border: 4px solid #ffffff;
border-radius: 30%;
box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
margin-right: 100%;
margin-bottom: 20px;
}
});
</style>
<a href="#abrirModal">VideoPW</a>
<div id="abrirModal" class="modalDialog">
 <div>
  <a class="close"href="#close" ><img src="js/fechar.png"></a>
  <iframe src="http://video.pw/e/s2yr2oyvr5vtlra/"scrolling="no" frameborder="0" width="854px" height="480px"></iframe>
 </div>
</div>