JSFiddle - React, Tailwind, and code Playground

by Tony Brix

HTML

Hi, I'm text on the page

CSS

body{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

function displayOverlay(text) {
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
        "position": "fixed",
        "top": "0px",
        "left": "0px",
        "width": "100%",
        "height": "100%",
        "background-color": "rgba(0,0,0,.5)",
        "z-index": "10000",
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "40px",
        "font-weight": "bold",
        "cursor": "wait"
    }).appendTo("body");
}

function removeOverlay() {
    $("#overlay").remove();
}

$(function () {
    $("body").click(function () {
        if ($("#overlay").length > 0) {
            removeOverlay();
        } else {
            displayOverlay("Loading...");
        }
    });
    displayOverlay("Loading...");
});