JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<button id="fire-popup">Popup Trigger</button>
<div id="popup-container" class="full-layer">
    <div id="popup-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis non massa vitae mollis. Suspendisse at pellentesque lacus. Nunc ante quam, congue sed egestas quis, porta sed metus.
    </div>
    <div id="popup-overlay" class="full-layer"></div>
</div>
</div>

CSS

body {height:1000px;}
.block-scroll {overflow:hidden;}
#popup-container {display:none;}
#popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px 20px;
    z-index:1;
}
#popup-overlay{
    background-color: rgba(0, 0, 0, 0.6);
}
.full-layer{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

JavaScript

$(document).ready(function(){
    var $popContainer = $('#popup-container');
    var $body = $('html,body');

    $('#fire-popup').on('click', function() {
        $popContainer.fadeIn();
        $body.addClass('block-scroll');
    });
    $('#popup-overlay').on('click', function() {
        $popContainer.fadeOut();
        $body.removeClass('block-scroll');
    });
});