In this blog, we have created an example of a very simple and responsive jQuery popup box. Popup box is used frequently in the webpages for various purpose (Notification message, Alert message etc. ). If you need a simple and elegant responsive popup box, then this popup box will be really handy for you.

Below, we had mentioned the code and the zip folder for your usability.

Script File and Code :

<!-- jQuery and jQuery Code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {
    $(".openBtn").click(function(){
        $(".web-popup-Container").show(500);
    });
    $(".btn-close").click(function(){
            $(".web-popup-Container").hide(500);
    });
    $(".popup-bgOverlay").click(function(){
        $(".web-popup-Container").hide(500);
    });
})
</script>    

HTML Code :

<div style="width:800px; margin:10px auto; background:#5e5e5e; padding:10px 10px;">
  <h2 class="noteTxt">Click on "Open Modal Popup" Button, to get the Popup.</h2>
  <button class="openBtn" >Open Modal Popup</button>
</div>

<!-- =Web Popup Container Start= -->
<div class="web-popup-Container">
  <div class="popup-bgOverlay"></div>

  <!-- =Popup Box Frame Start= -->
  <div class="popup-box-frame">
    <div class="popup-title-Head">
        <h3 class="popup-heading">Popup Title</h3>
        <button class="btn-close">Close X</button>
    </div>

    <div class="popup-content-frame">
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        </p>
    </div>
  </div><!-- =Popup Box Frame End//= -->
</div><!-- =Web Popup Container End//= -->

CSS :

.noteTxt{
    font-weight:400;
    color:#fff;
    font-size:18px;    
}
.openBtn { cursor:pointer; }
/****************************************
    Popup Style Elements
*************/
.web-popup-Container {
    width:100%;
    height:100%;
    top:0;
    position:fixed;
    z-index:5;
    display:none;
}
.web-popup-Container .popup-bgOverlay {
    width:100%;
    height:100%;
    position:fixed;
    opacity:0.8;
    -moz-opacity:0.8;
    -webkit-opacity: 0.8;
    background:#111;    
}
.web-popup-Container .popup-box-frame {
    width:60%;
    max-height:500px;
    position:absolute;
    z-index:5;
    top:10%;
    left:20%;
    background:#fff;
    border-radius:6px 6px;
    -webkit-border-radius:6px 6px;
    -moz-border-radius:6px 6px;
}
.web-popup-Container .popup-box-frame .popup-title-Head {
    position:relative;
    padding:5px 10px;
    background:#069;
    border-radius:6px 6px 0 0;
    -webkit-border-radius:6px 6px 0 0;
    -moz-border-radius:6px 6px 0 0;
}
.popup-box-frame .popup-title-Head .popup-heading {
    font-size:18px;
    color:#fff;
    padding:6px ;
    margin:0;
    display:inline-block;    
}
.popup-box-frame .popup-title-Head .btn-close {
    width:70px;
    position:absolute;
    right:10px;
    top:6px;    
}
.popup-content-frame {
    padding: 10px 15px;
}
.popup-content-frame p {
    font-size:14px;
    line-height:20px;
    text-align:justify;    
}

Below, I have also attached a Zip file (simple_responsive_popupBox.zip) with this blog. You can download the whole code packet for further use.