JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<div id="rootpane">
    <div id="glasspane" style="display: none;"> <span id="ajudaInput">
            Entre aqui com um texto.<br/><br/>
            Cada caractere que você digitar fará com que o valor atual da caixa de texto seja exibido logo abaixo, em uma nova linha.<br/><br/>
            Ao clicar nessa linha, o valor da mesma será exibido num alert.<br/><br/>
            <a id="mostraButton" href="#">Próximo</a>
        </span>
 <span id="ajudaButton">
            Ao clicar aqui, um alert será exibido com a palavra "Button".
        </span>

    </div>
    <input />
    <button>Teste</button> <a id="ajuda" href="#">Ajuda</a>
 <span id="log"></span>

</div>

CSS

#glasspane {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events:none;
}
#glasspane span {
    background-color: lightgray;
    opacity: 0.8;
    position: absolute;
    width: 300px;
    height: 200px;
    display: none;
}

#glasspane a {
    pointer-events:all;
}

JavaScript

$("input").bind("input", function () {
    var val = $(this).val();
    $("<p>" + val + "</p>").appendTo($("#log")).click(function () {
        alert(val);
    });
});

$("button").click(function () {
    alert('Button');
});

var aceita = $("input")[0];
$("#ajuda").one("click", function (e) {
    e.preventDefault();
    $("#glasspane").show();

    function seletivo(e) {
        // Não bloqueia nada no glasspane em si
        if ( $("#glasspane").find(e.target).length )
            return;
        // Bloqueia tudo, menos o elemento em foco
        if (e.target !== aceita) {
            e.preventDefault();
            e.stopPropagation();
        }
    }
    $("#rootpane")[0].addEventListener("keydown", seletivo, true);
    $("#rootpane")[0].addEventListener("click", seletivo, true);

    var pos = $("input").position();
    $("#ajudaInput").css({ top:pos.top + 30, left:pos.left }).show();
});

$("#mostraButton").click(function(e) {
    e.stopPropagation();
    $("#ajudaInput").hide();
    
    aceita = $("button")[0];
    var pos = $("button").position();
    $("#ajudaButton").css({ top:pos.top + 30, left:pos.left }).show();
});