Cacher is the code snippet organizer for pro developers

.modal-open { overflow: hidden; }

.lightbox { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; background-color: rgba(0,0,0,0.5); padding: 120px 10px; display: none; overflow: auto; }

.popup-modal { position: relative; margin: 0 auto; display: none;
    .close { position: absolute; display: block; width: 13px; height: 13px; top: 10px; right: 10px; background-color: transparent; padding: 0; @include transform(rotate(45deg));
        &:before { position: absolute; width: 100%; height: 2px; top: 50%; left: 0; margin-top: -1px; background-color: $color_red; content: ''; }
        &:after { position: absolute; width: 100%; height: 2px; top: 50%; left: 0; margin-top: -1px; background-color: $color_red; @include transform(rotate(90deg)); content: ''; }
        &:hover {
            &::before, &::after { background-color: $color_hover; }
        }
    }
}

.post-popup { width: 100%; max-width: 650px; background-color: #fff; box-shadow: 0 7px 8px rgba(0,0,0,0.25);
    .popup-header { padding: 20px 30px; font-size: 14px; 
        h3 { @include font($font_cor); color: #000; line-height: 1.2; font-size: 36px; }
        p { font-weight: 500; letter-spacing: 0.64px; margin-bottom: 10px; color: $color_gray_cite; }
        span { font-size: 18px; line-height: 1.2; }
    }
    figure {
        img { width: 100%; }
    }
    .popup-main { padding: 20px 30px 40px; font-size: 20px; }
}

jQuery(function($){
    // Lightbox Triggers
    lightboxTrigger(".open-popup-link", ".popup-modal");
});

function lightboxTrigger(link, object) {
    var target = $(".open-popup-link").attr("href");
    $(link).on("click", function(event) {
        event.preventDefault();
        $(target).wrap( "<div class='lightbox'></div>" );
        $(".lightbox").fadeIn(300, function() {
            $(target).fadeIn(0);
            $("body").addClass("modal-open");
        });
    
        $("body").on("click", function(event) {
            if(($(event.target).hasClass("lightbox") || $(event.target).hasClass("close")) && $(target).parent().hasClass("lightbox") ) {
                $(".lightbox").fadeOut(300, function() {
                    $(target).hide(0);
                    $(target).unwrap();
                });
                $("body").removeClass("modal-open");
            }
        });
    });
}

<article class="item">
    <figure>
        <a href="#post-popup" class="open-popup-link"><img src="http://www.unsplash.it/460/306?image=648" alt=""></a>
    </figure>
    <div class="item-info">
        <h4><a href="#post-popup" class="open-popup-link">Item Title</a></h4>
        <p>Item Content</p>
        <a href="#post-popup" class="link open-popup-link">View More</a>
    </div>
</article>

<div id="post-popup" class="post-popup popup-modal">
    <button class="close">x</button>
    // Any Content Here
</div>