JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="alertbox()">Click to alert</button>

<button onclick="dialogSec()">Click to dialogBox</button>

<div id="dialogboxSec">
    <h1>Are you sure this is currect funtion ?</h1>
    <button onclick="getClose()">Yes</button>
    <button onclick="getClose()">No</button>
</div>


<div id="overlay"></div>

CSS

#dialogboxSec{
    width:300px;
    margin:0 auto;
    border:solid 5px red;
    background:rgba(0,0,0,0.4);
    padding:20px;
    position:fixed;
    z-index:5;
    top:20px;
    left:50%;
    margin-left:-150px;
}

#overlay{
    position:fixed;
    z-index:3;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.2);
}

#overlay, #dialogboxSec{
    display:none;
}

JavaScript

var overlay = document.getElementById("overlay");
 var dialogBox = document.getElementById("dialogboxSec");

alertbox = function(){
  alert("Hi i m alert box");
};


 dialogSec = function(){
     overlay.style.display = "block";
     dialogBox.style.display = "block";
}
 
 getClose = function(){
         overlay.style.display = "none";
         dialogBox.style.display = "none";
 }