JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<button id="open">Open</button>
<div id="test">Lorem ipsum</div>

CSS

body { padding: 1em; }
#test {
    width: 200px;
    height: 200px;
    background: gray;
    margin: 1em;
}

JavaScript

var button = $( '#open' )[0];
var elem = $( '#test' )[0];

$( button ).on( 'click', function ( e ) {
    $( elem ).show();
    e.stopPropagation();
});

$( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest( elem ).length === 0 ) {
        $( elem ).hide();
    }
});
                
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) {
        $( elem ).hide();
    }
});