Custom Popup

jQuery Popup

by Zuhaib Siddiqui

HTML

<div class='popup' id="hello">
  <h1>This is H1</h1>
</div>
<a data-popup="hello" href="#hello">click</a>

CSS

.popup{
  background-color:#fff;
  padding:10px;
  border:1px solid #333;
  display:none;
}

JavaScript

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

$pop2 = $('.popup').click(function(){
notH=0;
});

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

$('.popup').on('click',function(e){
$(this).stop().show().fadeIn();
});

$('.pop').click(function(){
	var popid = $(this).attr('data-popup');
	var getPopId = $('#'+popid);
	gePopId.stop();fadeIn();
});