JSFiddle - React, Tailwind, and code Playground

by sendil J

HTML

<div>
    <div id="top">
        <div id="overlay"><div id="aprrovalBtn"></div> </div>
        <div id="button"> </div>
    </div>
    <div id="bottom"> </div>
</div>

CSS

#top{
   width: 200px;
    height:100px;
    background:#eee;
    position: relative;
}

#bottom{
   width: 200px;
    height:100px;
    background:#ccc;
    display:none;
     position: relative;
}
#button{
    width:20px;
    height:10px;
    background:#ddd;
    margin:5px;
    float:right;
    cursor:pointer;
}
#overlay{
    width:200px;
    height:100%;
    background:pink;
    opacity:0.2;
    position: absolute;
    z-index:100001;

}
#aprrovalBtn{
    width:20px;
    height:10px;
    background:red;
    margin:auto;
    opacity:1;
    cursor:pointer;
    margin-top:25%;
     position: relative;
}

JavaScript

$(document).ready(function(){
  $("#button").click(function(){
     
      if($('#bottom').css('display')=="none"){
         $('#bottom').css('display','block');
      }else{
          $('#bottom').css('display','none');
          $('#overlay').css('display','block');
      }
  });
      $("#aprrovalBtn").click(function(){
        $('#overlay').css('display','none');
  });
});