JSFiddle - React, Tailwind, and code Playground

HTML

<button value="Click Here">
    <div class="mascara"></div>
    <div class="msgbox">oi feche a msgbo xclicando <a href="javascript:fechar()">aqui</a>
    </div>
</button>

CSS

.mascara{
position:fixed;
background:rgba(0,0,0,0.7);
width:100%;
height:100%;
top:0;
left:0;
}

/* customize a box do seu jeito */
.msgbox{
position:absolute;
width:300px;
height:200px;
top:calc(50% - 100px);
left:calc(50% - 150px);
background:#fff;
text-align:center;
}

JavaScript

function fechar(){
    $(".msgbox").toggle(300);
    $(".mascara").toggle(300);
}