How to create a popup on a button click event

Mostly people are still confuse to make a simple popup options,however it is nothing except a few lines of code.I am sharing a popup menu that appears on a button click and can be close by a close button in the popup option.A few things that this popup have are:

• The user cannot scroll when popup appear.
• The user cannot click anywhere else on screen when popup is their.
• The popup appear and disappear in a smooth transition.
• No matter on which scroll level does the popup triggered,the popup will all ways be in the centre of screen.

So lets begin with this tutorial by first having a view on it by close:

See the Pen On click popup by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

HTML

<div class='blank'></div>
<div class='close-popup'><span>Close</span></div>
The Popup content will go here
</div>
<div class='content'>
This is the body part
</div>

It is not necessary that the popup and blank are the siblings of the main content,they could be child too.But it should be noted that the content must not have a position set to relative,in some cases it won't cover the whole screen and will create difficulties for you.However,still you have a simple solution to use these elements as a sibling.

CSS

.blank{
  position:fixed;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  top:0;
  left:0;
  display:none;
}
.popup{
  position:fixed;
  display:none;
  top:20%;
  left:25%;
  padding:25px;
  width:50%;
  background:#eee;
}
.close-popup{
  display:block;
  margin:20px 0;
  text-align:right;
}
.close-popup span{
  padding:5px;
  background:#ddd;
  cursor:pointer;
}
.trigger{
  display:inline-block;
  padding:10px;
  background:#333;
  color:#fff;
  margin:10px;
  cursor:pointer;
  float:left;
}

If you have noticed,then let me tell you that you will design each and everything of the popup in the CSS because it will decrease the Javascript and second it  is easy to make.Secondly, set the popup and blank to display none so that using Jquery we can break the property.

Jquery

$('.trigger').click(function(){
$('.blank,.popup').show(500);
  $('body').css("overflow","hidden");
});
$('.close-popup span').click(function(){
$('.blank,.popup').hide(500);
  $('body').css("overflow","auto");
});

As I told,you just need to overcome on the script using CSS to make this not the Jquery. Jquery will only do two functions:

• Will break the property of display none.
• Will change the property of body to make it non-scrollable.

If anything is unclear,our comments are open.