CSS / HTML Modal - Using Escape / Click Outside to Close

Question

I have the following modal work,

http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

on my site. This is exactly what I want in terms of ease of use and function. The only problem I am facing is how to make the closure modal when the user either A) clicks outside the modal window or B) Holds the Escape key.

Any suggestions?

<a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <h2>Modal Box</h2> <p>This is a sample modal box that can be created using the powers of CSS3.</p> <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> </div> </div> .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); 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: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; 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; } 

Answer 1

For this you need a little javascript. Check out the code with comments.

 function modalClose() { if (location.hash == '#openModal') { location.hash = ''; } } // Handle ESC key (key code 27) document.addEventListener('keyup', function(e) { if (e.keyCode == 27) { modalClose(); } }); var modal = document.querySelector('#openModal'); // Handle click on the modal container modal.addEventListener('click', modalClose, false); // Prevent event bubbling if click occurred within modal content body modal.children[0].addEventListener('click', function(e) { e.stopPropagation(); }, false); 

Demo: http://jsfiddle.net/GG9Sa/264/

Note that closing is modally technically possible only with CSS / HTML, however, you will need Javascript to access the Escape key.

Answer 2

just write these lines in the title

 $(document).on('keyup',function(evt) { if (evt.keyCode == 27) { location.href="#close"; } });