JSFiddle - React, Tailwind, and code Playground

HTML

<button id="show">Show lightbox</button>

<div id="adonsite" style="display:none">
    <div class="white-content">
        <button id="close">Close</button>
            <p>Clique no botão (Close) ou em qualquer sítio fora da caixa branca para ocultar isto.</p>
            <div class="advertise">AD</div>
    </div>
</div>
<div id="overlay" style="display:none">

CSS

#close {float: right;}

.white-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    border: 5px solid gray;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
#overlay {
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

.advertise {
  background: #5DB0EE;
  color: #fff;
  font-size: 80px;
  text-align: center;
}

JavaScript

$( '#overlay, #close').on('click', function(event) {
    $("#adonsite, #overlay").hide();
});

$( '#show').on('click', function(event) {
    $("#adonsite, #overlay").show();
});