Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Demo by Roko C.B. - Hide Modal if clicked outside</title>
</head>
<body>
  
  <a href="http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it/18817441#18817441">Stackoverflow: use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it</a><br><br>
​
  <div id="popup">
    <p>
      Now, click outside to close me<br>
      <sub>...or use <kbd>esc</kbd></sub>
    </p>
    <button>DUMMY CLICK</button>
  </div>
  
  
​
  <button class="pop">CALL POPUP</button>
  
  
  
  
</body>
</html>
 
body{
  background:#9af;
  height:1000px;
  font-family: Helvetica,
               Arial;
}
​
​
#popup{
  display:none;
  position:fixed;
  margin:20% 50%;
  padding:15px 25px;
  width:220px; 
  left:-135px; /* 220/2+25 */
  background:#def;
  border-radius:4px;
  box-shadow:0 3px 3px -2px #024;
}
 
var notH = 1,
    $pop = $('#popup').hover(function(){notH^=1;});
​
$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.stop().fadeOut();
});
​
​
​
​
​
​
/////// CALL POPUP 
$('.pop').click(function(){
  $pop.stop().fadeIn(); 
});
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers