JSFiddle - React, Tailwind, and code Playground

by needlethread

HTML

This paragraph is for testing
<br/>
Hello world!
<br/>
How are you?
<br/>
Be happy!
<br/>
<input id="cmd" type="button" value="Test" />
<input id="cmd2" type="button" value="try this" />
<div id="mytext"></div>

CSS

#loading {
    background-color: black;
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
}

#loading * {
    vertical-align: middle;
}

#loading_box {
    display: inline-block;
    height: 100%;
}
#loading_txt {
    color: #49a0dc;
    font-weight: bold;
/*    margin-left: 0.5em;*/
    font-family: "Arial Black", Gadget, sans-serif;
}

JavaScript

$(document).ready(function() {
    var loading = $('<div>').prop('id', 'loading');
    loading.html('<div id="loading_box"></div><img src="http://www.fchdata.com/img/loading/loading.gif" /> <span id="loading_txt">Loading...</span>');

       $("#cmd2").click(function() {
               alert("managed to click on me");
       });
    
    
    
    $("#cmd").click(function() {
        loading.appendTo('body');
        $("#mytext").html("dis - enabled");
         setTimeout(reenable, 3000);
        
        var event = $(document).click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            e.stopImmediatePropagation();
        });

        // disable right  click
        $(document).bind('contextmenu', function(e) {
            e.stopPropagation();
            e.preventDefault();
            e.stopImmediatePropagation();
        });
    });
});

function reenable() {
    $(document).unbind('click');    
       $("#mytext").html("re-enabled");
        $("#loading").remove();
}