JSFiddle - React, Tailwind, and code Playground

HTML

<div> content here blaaaaaaa</div>

CSS

.ui-widget-overlay {
    background: repeat-x scroll 50% 50% #AAA;
    opacity:0.3;
}

JavaScript

var overlay = null;
$(document).ready(function(){
    $(document).toggle(function(e){
        if(overlay == null){
            overlay = $('<div class="ui-overlay"  style="position: absolute; top: 0pt; left: 0pt; display: inline-block; overflow: hidden;"><div class="ui-widget-overlay" style="top: 0pt; left: 0pt; width: 9999px; height: 99999px;"></div></div>').hide().appendTo($('body'));
            $(overlay).width('100%');
            $(overlay).height('100%');
        }
        $(overlay).fadeIn();
    },function(e){
        $(overlay).fadeOut();
    });
});