<header id="menu">
    <button id="cadastrar" class="button-flex-son">Cadastrar</button>
    <button id="entrar" class="button-flex-son">Entrar</button>
</header>
<div></div>

background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;

height: 300px;
width: 500px;
background-color: #3E94D1;
text-align: center;
padding: 20px;
position: relative;
border-radius: 4px;

const caixa = document.querySelector('div')
document.getElementById('entrar').addEventListener("click", ()=>{
    caixa.innerHTML =

    '<div class="caixa">' +
        '<div class="conteudo">' +
            '<div class="close">+</div>' +
             //Insira o coisa de imagem aqui depois, arrombado
            '<form class="forms" action="">' +
                '<input type="email" name="email" placeholder="E-mail" class="inputao">' +
                '<input type="password" name="senha" placeholder="Senha" class="inputao">' +
                '<button type="submit" class="butao">Entrar</button>' +
                '<button type="submit" id="cadastro-butao" class="butao">Cadastro</button>' +
            '</form>' +
        '</div>' +
    '</div>'
});