Bonjour a tous, j'aimerais créer 4 fenêtres modal popup dans une page, mais le problème est que la première fonctionne bien mais a la deuxième fenêtre si je clique sur le bouton ça ouvre la première fenêtre,  je compris que c'est les nom que je doit changer et bien je l'ai fait mais rien ne change

voici donc mon code: HTML

<input type="button" class="popup1" value="connexion" onclick="document.getElementById('modal-wrapper').style.display='block'" style="width:110px;">
	<span style="z-index: 1">
	   <div id="modal-wrapper" class="modal">
	      <form class="modal-content animate" action="entete.php" enctype="mulpart/form-data">
		   <div class="imgcontainer">
		      <span onclick="document.getElementById('modal-wrapper').style.display='none'" class="close" title="Fermer"><img src="../image/close.png"></span>
		   </div>
		   <?php include('connexion.php') ?>
	      </form>
	   </div>
	</span>
		

voici le CSS:	

.imgcontainer{text-align: center; margin: 24px 0 12px 0; position: relative;}
.modal{display: none; position:fixed; left: 200px; top: 0; width: 70%; height: 100%; overflow: auto;}
.modal-content{background-color: #BABABA;  margin: 4% auto 4% auto; border:1px solid #888; width: 40%; padding-bottom: 30px;}
.close{position: absolute; right: 7px; top: -20px; color: #000; font-size: 20px; font-weight: bold;}
.close:hover, .close:focus{background-color: red; cursor: pointer;}
.animate{animation: zoom 0.6s}
@keyframes zoom{
from{transform: scale(0);}
to{transform: scale(1);}

 code du deuxieme fenetre: html

<input type="button" class="popup2" value="inscription" onclick="document.getElementById('popup-wrapper').style.display='block'" style="width:110px;">
	<span style="z-index: 1">
	   <div id="popup-wrapper" class="popup">
	      <form class="popup-content animat" action="entete.php" enctype="mulpart/form-data">
		   <div class="imagecontainer">
		      <span onclick="document.getElementById('popup-wrapper').style.display='none'" class="fermer" title="Fermer"><img src="../image/close.png"></span>
		   </div>
		   <?php include('inscription.php') ?>
	      </form>
	   </div>
	</span>

son css:

.imagecontainer{text-align: center; margin: 24px 0 12px 0; position: relative;}
.popup{display: none; position:fixed; left: 200px; top: 0; width: 70%; height: 100%; overflow: auto;}
.popup-content{background-color: #BABABA;  margin: 4% auto 4% auto; border:1px solid #888; width: 40%; padding-bottom: 30px;}
.fermer{position: absolute; right: 7px; top: -20px; color: #000; font-size: 20px; font-weight: bold;}
.fermer:hover, .close:focus{background-color: red; cursor: pointer;}
.animat{animation: zoom 0.6s}
@keyframes zoom{
from{transform: scale(0);}
to{transform: scale(1);}

-
Edité par divinushindi 5 janvier 2019 à 1:19:45