Togglable DIV

by Luca De Nardi

HTML

<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>

CSS

body{
  background:#9af;
  height:1000px;
  font-family: Helvetica,
               Arial;
}


#popup{
  display:none;
  position:fixed;
  padding:15px 25px;
  width:220px; 
  left:-135px; /* 220/2+25 */
  background:#def;
  border-radius:4px;
  box-shadow:0 3px 3px -2px #024;
}

JavaScript

var notH = 1,
    $pop = $('#popup').hover(function(){notH^=1;});

$(document).on('mouseup keydown', function( e ){
  if(notH||e.which==27) $pop.stop().fadeOut(50);
});

$('.pop').click(function(e){
    $pop.css('top', $($('.pop')[0]).position().top + 25 + 'px');
    $pop.css('left', $($('.pop')[0]).position().left + 'px');
    $pop.stop().fadeIn(50);
});