JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<a href="" class="link">A LINK</a>
		<div id="popush"> 
		    this is some text.
		</div>

CSS

body {
				z-index: 19;
				background-color: grey;

			}

			#popush{
			    border: 1px solid black;
			    z-index: 20;
			    background: #fff;
				box-shadow: 0 0 45px #000;
				position: absolute;
				width: 100px;
				left: 50%;
				margin-left: -380px;
				top: 20%;
				display: none;
			}

JavaScript

$(".link").click(function(e){
    e.preventDefault(); // prevent default link behaviour, or the browser will try to redirect you to an other page (that's what links do).
    $("#popush").show(function(){ //this function will only be created when the #popush shows, it's a callback.        
        $(document).one("click",function(){  //I used $.one() I let you read the doc about this ;)
            $('#popush').hide();
        });
    });
});