A simple modal popup using HTML , CSS and JQUERY

In this tutorial i will show you how to create a simple modal popup using HTML, CSS and jquery (jquery only use to show/hide the popup) and how to place it at the center of the screen.

Live Demo

STEP 1 :

Create a parent div which will act as modal black background.

and apply below css to it

    .overlay{
     position:fixed;
     top:0;
     left:0;
     bottom:0;
     right:0;
     background-color:rgba(0,0,0,.7);

     /* below code is not necessary*/
     background-size: 60px 60px;
     background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
     background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
    }

Up to this point you got a nice black gradient background.

STEP 2 :

Now that you have your background setup,Let create the popup.

 

  
  X
  
Subscribe
  

   Do you want to subscribe??
  
  

   
No
   
Yes
  
 

And apply below css to style the popup and position it at the center both horizontally and vertically.

.popup{
    background-color:#fff;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    width:60%;
    top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
}
.popup .close{
    position:absolute;
    top:-10px;
    right:-10px;
    background-color: #000;
    border-radius: 30px;
    padding: 5px 6px;
    color: #fff;
    font-size: 10px;
    cursor:pointer;
}
.popup .title{
 padding: 10px;
    background-color: #4679bd;
    color: #fff;
    margin-top: 0px;
}
.popup .content{
 padding: 0px 10px 10px;
    border-bottom: 1px solid #d7d7d7;
}
.popup .button_container{
 padding:10px;
}
.popup .button_container .button{ 
    display: inline-block;
    color: #fff;
    padding: 7px 10px;
    cursor:pointer;
}
.popup .button_container .button.action{
   float:right;
   background-color: #4679bd;
}
.popup .button_container .button.cancel{
   background-color:#ff0000;
}

STEP 3 :

At this point the popup is complete but it is of no use without the logic to open and close the popup.So add a button on click of which popup will open.

 
 
......

And add below css to initially hide the popup

 .popup{
  ...../* previous css code */
  display:none;
 }

And finally some javascript code to show/hide the popup.

$('#openPopup').click(function(){
 $('.overlay').css("display",'block');
});

$('.popup .close').click(function(){
 $('.overlay').css("display",'none');
});
$('.overlay').click(function(){
 $('.overlay').css("display",'none');
});

$('.popup').click(function(event){
 event.stopPropagation();
});