HTML Popup display without JQuery lightbox.

Sometimes you simply want to display a popup on the page without a lot of features. You don't need libraries like FancyBox, Magnefic and LightBox to achieve this or any other jquery library. You can make a simple popup with CSS and open and close js code.

Page Content

This layer is the base layer from where you call your popup screen through the popup button.

<div class="content">   
    <p>Page Content</p>
    <a href="#" class="up-open btn btn-primary">OPEN POPUP</a>
</div>

Popup HTML

Along with the modal, there is the overlay which prevents users from clicking on rest of the page. The z-index of the modal is kept one level above the overlay.

<!-- Overlay -->
<div class="up-overlay"></div>
<!-- Modal Div  -->
<div class="up-modal">
    <span class="up-close">X</span>
    <!-- Put your content here -->
    <h2>Place your Popup content here!</h2>
    </div>
    <!-- You content end's here -->
</div>

    .up-modal{
        display: none;
        background-color: seagreen;
        width:70%;
        height: 60%;
        top: 20%;
        left: 15%;
        position: absolute;
        z-index: 3;
    }

    .up-overlay {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 2;
        cursor: pointer;
    }

Open and Close

You definitely need the close button on the modal. We chose to keep an X symbol outside the modal.

.up-close{
    position: relative;
    float: right;
    background: red;
    color: white;
    top: -20px;
}

.up-close:hover{
    cursor: pointer;
}

Javascript to open/close modal

With the help of document.querySelector we will catch the DOM and use it in function which we have created to open and close the popup window.

var closeButton = document.querySelector('.up-close');
var upModal = document.querySelector('.up-modal');
var upOverlay = document.querySelector('.up-overlay');

closeButton.addEventListener("click", function(){
    upModal.style.display = 'none';
    upOverlay.style.display = 'none';
})

var openButton = document.querySelector('.up-open');
openButton.addEventListener('click', function() {
    upModal.style.display = 'block';    
    upOverlay.style.display = 'block';
})

With the above mentioned jQuery we will be able to open or close the Popup.