JSFiddle - React, Tailwind, and code Playground

HTML

<body>    
          <div id="meuDialog">
                <div id="meuDialogConteudo">
                    <input id="meuBotaoOcultar" type="button" onclick="OcultarDiv();" value="X" style="float: right; margin: 6px; background-color: red;" />                  
                    <p>
                        Eu sou um popup criado com div e javascript sem usar jQuery.
                    </p>                             
                </div>
            </div>

            <input id="meuBotaoMostrar" type="button" onclick="MostrarDiv();" value="Mostrar" style="margin: 6px; background-color: deepskyblue;" />     
    </body>

CSS

#meuDialog {            
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; 
  bottom: 0;
  left: 0; 
  right: 0; 
  background: rgba(0, 0, 0, 0.2);
  padding: 20px;
  overflow-y: auto;
}

#meuDialogConteudo {
  position: fixed;
  width: 600px; 
  height: 600px;
  top: 50%;
  margin-top: -300px; 
  left: 50%;
  margin-left: -300px;
  border: 1px double black; 
  background-color: deepskyblue; 
  overflow-y: auto;
}

@media (max-width: 800px), (max-height: 600px) {

  #meuDialogConteudo {
    position: absolute;
    margin-top: -200px; 
  }  

}

JavaScript

function OcultarDiv() {
  var meuDialogConteudo = document.getElementById("meuDialog");
  meuDialogConteudo.style.display = "none";
}

function MostrarDiv() {
  var meuDialogConteudo = document.getElementById("meuDialog");
  meuDialogConteudo.style.display = "block";
}