Prblème de transition modal box

Bonjour, j'ai un soucis d'affichage.

En fait si vous cliquez sur "login" en haut à droite une popup va s'ouvrir :
https://www.webargent.fr/concours.php
Les box vient d'en haut et se place assez bas. Puis si j'entre des informations erronées, la box s'affiche plus haut, et reste à ce niveau, même en revenant sur le formulaire de login. Je ne comprend pas pourquoi la box se place différemment au premier popup ? merci

J'ai aussi un soucis pour le fermeture de la popup. Je souhaiterai qu'elle ne se ferme que si je clique sur une "croix". Je pourrai donc ajouter un code JS. LE hic c'est qu'une fois la fenêtre fermée, si je reclique sur "login" dans le menu en haut à droite, la popup n'apparait pas

<script>
/*Pour fermer la box 
<span onclick="document.getElementById(\'login\').style.display=\'none\'"  class="w3-closebtn">&times;</span> Pour afficher croix qui ferme la box*/	
// Get the modal
var modal = document.getElementById('login');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == 'login') {
        modal.style.display = "none";
    }
}
</script>

Voici le code css :

1ere box pour le login

#login {
  left: 69%;
  margin: 0px 0 0 -32%;
  opacity: 0;
  position: absolute;
  top: 0%;
  visibility: hidden;
  width: 25%;
  box-shadow: 0 3px 7px rgba(0,0,0,.25);
  box-sizing: border-box;
  transition: top .4s ease-in-out;
  -moz-transition: top .4s ease-in-out;
  -webkit-transition: top .4s ease-in-out
}

#login:target {
  opacity: 1;
  top: 45%;
  visibility: visible
}
	

#login h2 {
  margin: 0;
  color: #fff
}

/*hauteur marges */
#login .btn { float: right }

#login .copy, #login .header, #login .footer {
  padding: 10px;
  color: #fff
}

.login-content {
  background: #34BC9D;
  position: relative;
  z-index: 20;
  border-radius: 5px;
	color: #fff
}

/*effet coupe titre du formulaire*/
#login .copy { background: #46CFB0 }

#login .overlay {
  background-color: #000;
  background: rgba(0,0,0,.8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10
}

.copy a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 5px;
  background-color: #E74C3C;
  margin-left: 34%; 
  margin-top: 10px;
}			
.bouton {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 5px;
  background-color: #E74C3C;
  margin-left: 34%; 
  margin-top: 10px;
}		
	
form span 
{
   display: block;
   width: 150px;
   float: left;
}
div.clear_both {
	overflow: auto;
	width: 100%;
	height: 5px;
}
	
/*Second modal box pour erreurs*/
#login_error {
  left: 69%;
  margin: 0px 0 0 -32%;
  opacity: 0;
  position: absolute;
  top: 0%;
  visibility: hidden;
  width: 35%;
  box-shadow: 0 3px 7px rgba(0,0,0,.25);
  box-sizing: border-box;
  transition: top .4s ease-in-out;
  -moz-transition: top .4s ease-in-out;
  -webkit-transition: top .4s ease-in-out
}

#login_error:target {
  opacity: 1;
  top: 45%;
  visibility: visible
}
	

#login_error h2 {
  margin: 0;
  color: #fff
}

#login_error .btn { float: right }

#login_error .copy, #login_error .header, #login_error .footer {
  padding: 10px;
  color: #fff
}

.login_error-content {
  background: #34BC9D;
  position: relative;
  z-index: 20;
  border-radius: 5px;
  color: #fff
}

#login_error .copy { background: #46CFB0 }

#login_error .overlay {
  background-color: #000;
  background: rgba(0,0,0,.8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10
}

Modifié par natsu84 (18 Jan 2017 - 22:33)