J'ai fait un modal et j'affiche des informations en utilisant une boucle php mais quand le modal est en dehors de la boucle il s'affiche bien mais dans la boucle il s'affiche mal. D'après mes recherches, il doit s'agir d'un problème d'index z, mais même si j'essaie de le résoudre, je ne sais pas exactement comment le faire.

J'ai essayé d'augmenter le z-index du modal mais ça ne marche pas

 <div class="modal fade" id="carteId<?php echo $students['id']; ?>" tabindex="-1" aria-labelledby="<?php echo $students['id']; ?>Label" aria-hidden="true" style="z-index: 1050 !mportant;">
      <div class="modal-dialog ">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="<?php echo $students['id']; ?>Label">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="main" class="output">
            <div class="ac-card">
              <div class="ac-card-image"> </div>
              <div class="ac-card-info">
                <p>
                  <strong id="name"><?php echo $students['nom'];  ?></strong><br>
                  <span id="prenom"><?php echo $students['prenom'];  ?></span>
                </p>
                <p id="date" class="ac-card-date"><strong> Née le </strong> <?php echo $students['date_de_naissance'];  ?></p>
                <p id="lieu"><strong> À</strong> <?php echo $students['ville'];  ?></p>
                <p id="classe"><strong> Classe : </strong><?php echo $students['flieres'] . " " . $students['niveau'];  ?></p>
                <p id="code"><strong> Matricule : </strong><?php echo $students['code_etudiants'];  ?></p>
              </div>
              <img class="ac-icon" src="https://imdac.github.io/images/codepen/AC_ICON_1C_BLK_70x58.png">
              <div class="ac-card-footer">
                <img class="ac-logo" src="https://imdac.github.io/images/codepen/AC_WORDMARK_1C_WHT.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Manque de Politesse

Votre message ne comporte pas ou peu de formules de politesse (« Bonjour », « Merci », « Au revoir », etc.). Les règles du site exigent que chaque nouveau message comporte un minimum de politesse. Après tout, les gens qui répondent le font gratuitement, sur leur temps libre. Ils méritent bien un minimum de considération, n'est-ce pas ?

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

---

Bonjour,

>> J'ai essayé d'augmenter le z-index du modal mais ça ne marche pas

Le z-index ne fonctionne que sur un élément positionner (autre que position: static; ) est-ce bien le cas?

D'après votre capture, je dirais que vous n'avez pas de référent de positionnement (dans ce cas c'est le body qui sert de référent) ou que vous positionnez la modale trop haut et trop à gauche. Modifier soit le point de référent de positionnement, soit la position du coin supérieur gauche de la modale. 

PS : un identifiant est unique dans le document, si vous avez plusieurs id="name" id="prenom" etc... cela est une erreur. Passez votre code au validateur pour voir si tout vas bien => https://validator.w3.org/

-
Edité par AbcAbc6 25 novembre 2023 à 15:15:49

Bonjour, je suis désolé pour le manque de formule de politesses.J'ai essayé de vérifié mon code sur le site donné, et celui-ci ne renvoie aucune erreur