单击外部或ESC时关闭模式窗口 [英] Close modal window when clicking outside or ESC

问题描述

我希望能够关闭模式窗口，当用户在窗口外单击时，或者他们已经按下了键盘上的退出键。已经看过很多关于这个主题的文章，但没有一篇与我的代码一起工作。

yCTA3 / 100 /rel =nofollow> http://jsfiddle.net/Draven/yCTA3/100/

HTML：

 < div class =audio-lg> 
< a href =＃openAudioref =openAudio> 
 < span class =play-static>< / span> 
< / a> 
< / div> 
< div id =openAudioclass =show_player> 
< div class =pp_pic_holderstyle =display：block> 
< div class =pptstyle =opacity：1; display：block; width：500px; height：20px>< / div> 
< div class =pp_content_container> 
< div class =pp_contentstyle =min-height：248px; width：500px> 
< div class =pp_fadestyle =display：block> 
< div id =pp_full_resstyle =background-color：black; text-align：center> 
< audio class =playerid =playerpreload =autocontrols> 
< source src =http://www.w3schools.com/html/horse.mp3type =audio / mpeg> 
您的浏览器不支持音频元素。 
< / audio> 
< / div> 
< div class =pp_detailsstyle =width：500px> 
< p class =pp_descriptionstyle =display：block>测试标题< / p> 
 < / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< div class =overlay>< / div> 
< / div> 
  

CSS：

  .show_player {
 opacity：0; 
 display：none; 
位置：绝对; 
 top：0; 
剩下：0; 
 width：530px; 
可见性：可见; 
} 
 .show_player：target {
 opacity：1; 
 display：block; 
 top：0; 
可见性：可见; 
} 
 .show_player .overlay {
 background：rgba（68,68,68,0.7）; 
位置：固定; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：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（）; 
}）; 
  

解决方案

p>

更新

  $（document）。 KEYUP（hideModal）; 
 $（。overlay）。click（hideModal）; 
 
 $ b $ function hideModal（e）{
 if（e.keyCode === 27 || e.type ==='click'）{
 window。 location.hash =＃; 
} 
 
 $（'＃player'）。get（0）.pause（）; 
} 
  

JSFIDDLE

I'd like to be able to close the modal window when a user has clicked outside the window, or if they have pressed escape in the keyboard.

I have looked at many of the posts on SO about this subject but none have worked with my 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;
}
.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();
});

解决方案

Another nice solution with the ESC functionality too.

UPDATED

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


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

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

JSFIDDLE

这篇关于单击外部或ESC时关闭模式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！