Popup form in jQuery

Something Like that:
Popup form

Popup form in jQuery with close functionality onclick outside form and Esc key.

For that you need to create first html code.

HTML

<span class="target_f">Target Form</span>

<div class="popup" id="popup">
  <i>x</i>
  <h2>Form</h2>
</div>

After that add this CSS code.

CSS

.target_f{
  background:#ddd;
  display:inline-block;
  padding:5px 10px;
  cursor:pointer;
}

.popup{
  top:30px;
  left:100px;
  position:absolute;
  width:300px;
  margin-top:20px;
  background:#ccc;
  visibility:hidden;
  opacity:0;
}
.popup.active{
  visibility:visible;
  opacity:1;
}
.popup i{
  width:20px;
  height:20px;
  display:block;
  text-align:center;
  cursor:pointer;
  border-radius:50%;
  color:#fff;
  background:#000;
  border:1px solid #fff;
}

Use jQuery Library.

After that add this JQuery code.

JS

$('.target_f').click(function(){
    $('.popup').addClass('active');
});	
$('.popup i').click(function(){
    $('.popup').removeClass('active');
});	

  $(document).keydown(function(e) {
	  if (e.which== 27) {  // ESC
      $('.popup').removeClass('active');
	  }   
	});
	
	
	$('body').click(function(evt){    
		   if(evt.target.id == "popup" )
		   {
          $('.popup').removeClass('active');
			 }
		   //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
		   if($(evt.target).closest('#popup').length)
		    {
			 console.log('hii')
			  return;   
			}
	
		  //Do processing of click event here for every element except with id menu_content
	
	});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”ZXyePY” default_tab=”js,result” user=”pradeepanvi”]See the Pen Popup form by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]