JSFiddle - React, Tailwind, and code Playground

by leeprice

HTML

<a href="#" class="pu">Show</a>

CSS

html, body{100%}

.pu_bg{
    position: absolute;
    top: 0; left:0;
    background: black;
    width: 100%; height: 100%;
    z-index: 0;
}

.pu_container {
    background: red;
    height: 100px;
    width: 250px;
    position: absolute;
    z-index: 100000;
    top: 50%; left: 50%;
    margin-top: -50px; margin-left: -125px;
}

JavaScript

(function($) {
    $.fn.show = function() {
        return this.each(function() {

            var link = $(this);
            
            $('.pu_container').on('click', function(e){
                e.stopPropagation();
            });

            link.click(function(e) {
                $('body').append('<div class="pu_bg">');
                $('.pu_bg').css({
                    'opacity': 0.5
                }).on('click', function() {
                    $(this).fadeOut(function(){
                        $(this).remove();    
                    });
                });;
                
                $('.pu_bg').append('<div class="pu_container">');

                e.preventDefault();
            });
            

        });
    };
})(jQuery);




$(function() {

    $('.pu').show();

});