< SnipShot />

Get started with JN Snippets

Step-by-Step Guide to setup a popup

Step 1: Add the Popup Button

To create a button that opens a popup, use the following attributes:

1. `data-popup="open_modal"`
2. `data-p-call="jn-popup-1"`

// Buttons for Popup
<button class="button_popup" data-popup="open_modal" data-p-call="jn-popup-1">
    Open Popup 
</button>

Step 2: Create the Popup Structure

The popup holder must have the class `.jn_popup` to control the show/hide functionality. Additionally, use the `data-p-target` attribute to link the popup with the button.

// Popup Holder
<section class="jn_popup" tabindex="-1" data-p-target="jn-popup-1">
    <div class="jn_dialog">
        <div class="jn_content_wrap">
            <div class="jn_header">
                <h5 class="hdr_hdng">Popup Title</h5>
                <button class="close_hdr" data-popup="close_modal" data-p-call="jn-popup-1">Close</button>
            </div>
            <div class="jn_content">
                <h3>What is Lorem Ipsum?</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <div class="jn_footer">
                <button class="close_ftr" data-popup="close_modal" data-p-call="jn-popup-1">Close</button>
            </div>
        </div>
    </div>
</section>

Handling Multiple Popups

To handle multiple popups on the same page, increment the data-p-call value for each button and corresponding popup holder.

Example for Multiple Popups:
Button for First Popup

// Buttons for Popup
<button class="button_popup" data-popup="open_modal" data-p-call="jn-popup-1">
    Open Popup 1
</button>

Popup 1 Holder:

// Buttons Holder
<section class="jn_popup" tabindex="-1" data-p-target="jn-popup-1">
    <!-- Popup content -->
</section>

Button for Second Popup

// Buttons for Popup
<button class="button_popup" data-popup="open_modal" data-p-call="jn-popup-2">
    Open Popup 2
</button>

Popup 2 Holder:

// Buttons Holder
<section class="jn_popup" tabindex="-1" data-p-target="jn-popup-2">
    <!-- Popup content -->
</section>

Step 3: Add the CSS

Here is the CSS to style the popup:

/* Popup CSS */
.jn_popup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    padding: 15px;
    opacity: 1;
    transition: 0.5s ease;
}

.jn_popup:not(.show){
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.jn_popup.show{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.jn_popup .jn_dialog{
    width: 600px;
    max-width: 100%;
    background-color: #fff;
    border-radius: 7px;
    margin: 0 auto;
}

.jn_popup .jn_content_wrap .jn_header,
.jn_popup .jn_content_wrap .jn_footer{
    width: 100%;
    padding: 15px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.jn_popup .jn_content_wrap .jn_header{
    border-bottom: 1px solid #000;
}

.jn_popup .jn_content_wrap .jn_footer{
    border-top: 1px solid #000;
}

.jn_popup .jn_content_wrap .jn_header .hdr_hdng{
    font-size: 24px;
}

.jn_popup .jn_content_wrap .jn_content{
    width: 100%;
    padding: 15px 20px;
    font-size: 14px;
}
.jn_popup .jn_content_wrap .close_hdr,
.jn_popup .jn_content_wrap .close_ftr{
    cursor: pointer;
}

Step 4: Add the JavaScript

To manage the popup functionality, use the following JavaScript:

// JS for Popup
document.addEventListener('DOMContentLoaded', function() {
    let showPopup = document.querySelectorAll("[data-popup='open_modal']");
    let hidePopup = document.querySelectorAll("[data-popup='close_modal']");

    showPopup.forEach(element => {
        // get which element hit 
        let pCall = element.getAttribute("data-p-call");

        // set loop for all popups
        element.addEventListener("click", function(){
            let pTarget = document.querySelector(`.jn_popup[data-p-target='${pCall}']`);
            pTarget.classList.add("show");
        });
    });

    hidePopup.forEach(element => {
        // get which element hit 
        let pCall = element.getAttribute("data-p-call");

        // set loop for all popups
        element.addEventListener("click", function(){
            let pTarget = document.querySelector(`.jn_popup[data-p-target='${pCall}']`);
            pTarget.classList.remove("show");
        });
    });


    // hide popup on escape click
    function handleKeyPress(event) {
        // Check if the pressed key is the 'Esc' key
        if (event.keyCode === 27) {
            // Select elements with the class 'modal_wrapper' and remove the 'show' class
            document.querySelectorAll('.jn_popup').forEach(function(element) {
            element.classList.remove('show');
            });
        }
    }
    
    // Add an event listener to the document to listen for key presses
    document.addEventListener('keydown', handleKeyPress);

    // hide popup on overlay click
    document.addEventListener('click', function(e) {
        // Check if the clicked element has the 'modal_wrapper' class
        if (e.target.classList.contains('show')) {
            // Select elements with the class 'modal_wrapper' and remove the 'show' class
            document.querySelectorAll('.jn_popup').forEach(function(element) {
                element.classList.remove('show');
            });
        }
    });
});

Notes:
- Ensure each popup button and its corresponding popup holder have matching `data-p-call` and `data-p-target` values respectively.
- Use the `jn_popup` class on the popup holder to manage visibility.