javascript - Close modal window when clicking outside or ESC - Stack Overflow

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.

/

HTML:

<div class="audio-lg">
    <a href="#openAudio" ref="openAudio">
        <img src=".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=".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();
});

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/Draven/yCTA3/100/

HTML:

<div class="audio-lg">
    <a href="#openAudio" ref="openAudio">
        <img src="http://s30.postimg/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./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();
});

• javascript
• jquery
• html
• css

Share Follow asked Jan 8, 2014 at 15:56 DravenDraven 1,46722 gold badges2020 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

check this : http://jsfiddle/yCTA3/113/

I am removing of te overlay class the attribute pointer-events:none ;

and add event click on overlay

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