Register button opens on its own

Question

I have a problem, when entering my site my registration button opens automatically, I wanted to take this functionality, but I am not able to and when I click the login button if the registration button is open it is behind. It was supposed that when you click the login button the register button disappears. It follows below my code:

Html:

<!---- Botão do iniciar sessão--->
<button class="login"  onclick="document.getElementById('id01').style.display='block'"  style="border:2px solid black; width:auto; border-radius:10%;" >
   <i class="fa fa-user">Iniciar Sessão</i>
</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="indexlogin.php"   method="post" >
   <div class="container">
      <input  id="field"type="text" name="email"style="border:1px solid black; width:auto;" placeholder="Email" required>
      <br>
      <input  id="field" type="password" name="password"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>
      <br>
      <button  id="field" type="submit"  name="login" style="border:1px solid black; width:200px;">
         Entrar
      </button>
   </div>
   <div  style="background-color: #adad85">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" action="indexlogin.php" style=" border:1px solid black; width:auto; border-radius:10%;" class="cancelarbutao">
         Cancelar
       </button>
    </div>
</form>
</div>  
<!---Fim do botão do iniciar sessão --->
<!--- Botão de registar---->
<button class="registar"  onclick="document.getElementById('id2').style.display='block'" style="border:2px solid black;  border-radius:10%;" >
   <i class="fa fa-user-plus">Registar</i>
</button>
<div id="id2" class="modal1">
   <form class="modal-content1 animate" action="indexlogin.php"   method="post" >
      <div class="container1">
         <input  id="field"  type="name"     name="nome"style="border:1px solid black; width:auto;" placeholder="Nome Completo" required>
         <input  id="field"type="text"      name="email_registar"style="border:1px solid black; width:auto;" placeholder="Email" required>
         <input  id="field" type="password"  name="password_registar"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>
         <input  id="field" type="password"  name="password_rep"style="border:1px solid black; width:auto;" placeholder=" Repita a palavra-Passe"required>
         <button  id="field" type="submit"    name="registar" style="border:1px solid black; width:200px;" >
            Criar Conta
         </button>
      </div>
      <div style="background-color: #adad85">
         <button type="button" onclick="document.getElementById('id2').style.display='none'" style=" border:1px solid black; width:auto; border-radius:10%;" class="cancelarbutao">
            Cancelar
         </button>
      </div>
   </form>
</div>

CSS:

.container {
   padding: 28px; /* padding  neste caso  e so  altura do  sistema de login*/
}
.container1 {
   padding: 30px; /* padding  neste caso  e so  altura do  sistema de login*/
}
.container:before { /* faz a seta  para o sistema de login. Mais apelativo*/
   content:'';
   position:absolute;
   width:30px;
   height:28px;
   margin-left:-11px;
   margin-top:-39px;
   background:#fff;
   -webkit-transform:rotate(45deg);  
}
.container1:before { /* faz a seta  para o sistema de registar. Mais apelativo*/
   content:'';
   position:absolute;
   width:30px;
   height:28px;
   margin-left:-24px;
   margin-top:-39px;
   background:#fff;
   -webkit-transform:rotate(45deg); 
 }
.palavra-passe {        /*PASS!!*/  
   float: right;        /*flutuar*/
   padding-top: 16px;   /*preencimento em cima*/
}
.modal {            /* SISTEMA DE LOGIN*/
   display: none;   /* faz com  que o sistema de login fique escondido */
   position: fixed; /* posiciona mais em cima */
   z-index: 1;      /* fica em cima */
   left: 178;
   top: 8;
   width: 100%;      /* comprimento  maximo */
   height: 100%;     /* altura maxima */
   padding-top: 13%; /* movimenta o  sistema de login para baixo*/
   padding-left:52%; /* movimenta o  sistema de login para esquerda*/
}
.modal1 {            /* SISTEMA DE LOGIN*/
   position: fixed;  /* posiciona mais em cima */
   z-index: 1;       /* fica em cima */
   left:170px ;
   top: 28%;
   width: 104%;      /* comprimento  maximo */
   height: 100%;     /* altura maxima */
   padding-top:17px;
   padding-left:51%;
}
.modal-content {
   background-color: #fefefe;
   margin: -13% auto 100% auto; /* move 5% para cima, 15% para baixo e fica centrado*/
   width: 36%;                  /* comprimento  do meu  sistema de login */
   height:39%;
}
.modal-content1 {
   background-color: #fefefe;
   margin: -13% auto 100% auto; /* move 5% para cima, 15% para baixo e fica centrado*/
   width: 34%; /* comprimento  do meu  sistema de registar */
   height:39%;
}
.animate {
   -webkit-animation: animatezoom 0.6s;
   animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
   from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}
}

Answer 1

In the CSS of .modal1 adds a display: none; as you have in the .modal, this will make it hidden when starting the page.