JSFiddle - React, Tailwind, and code Playground

by mojtaba

HTML

<div id="A">
    <!-- Some HTML elements -->
    <a id="button" href="#">Button</a>
    <div id="B">
        <div id="background"></div>
        <div id="content">
            <p>This is a paragraph</p>
            <img src="http://fakeimg.pl/350x200/?text=This is an image" width="350" height="200" />
        </div>
    </div>
</div>

CSS

#A {}

#B, #background  {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:10;
}

#B  {
    display:none; 
}

#background  {
    background:#FFF;
    opacity:0.3;
}

#content {
    position:absolute;
    z-index:20;
    top:0; /* will be centered by jQuery */
    left:0; /* will be centered by jQuery */
}

JavaScript

$(document).ready(function() { 
    $('#button').click(function() {
        showOverlay();
    });

     //if you want to close the overlay if the user clicks the background
    $('#background').click(function() {
        $('#B').hide();
    }) 
});

function showOverlay() {
    $('#B').show();
    $('#content').css({
        top : ($(window).height() - $('#content').height()) / 2,
        left : ($(window).width() - $('#content').width()) / 2
    });
}