Forum HTML Modal ne voulant pas s'afficher

Modal ne voulant pas s'afficher

Résolu

Salut, je regarde actuellement la vidéo #9 Voir son profil en php de la chaine Sitedudev. Dans la vidéo, il utilise boostrap pour aller copier le code d'un des modals proposé sur le site. J'ai reproduit exactement la même chose dans mon logiciel mais, contrairement à lui, quand j'appuie ensuite sur mon profil, rien ne s'affiche, on dirait juste que la page s'actualise mais aucune fenêtre ne vient s'afficher. Je ne comprends pas pourquoi, si quelqu'un aurait une solution svp ça serait fou :)

Voir moins Voir plus

645 vues

06 janvier 2022 à 0:53

Cette pub permet au site de vivre ...

Space001

Le 07 Janvier 2022 à 12:16

Re @Blach,

As-tu pensé à associer un bouton avec la fenêtre modal en question ? 🤔

Je te donne un exemple fonctionnel :

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Code provenant du site : https://getbootstrap.com

Comme tu as pu le voir, la balise <button> impliquant le bouton est associée aux paramètres spécifiques de la fenêtre modal 😉

En l'occurence, la propriété data-bs-target est associé au nom "exampleModal" mais tu peux la définir autrement à condition que le nom soit présent à la fois sur le bouton et à la fois sur la fenêtre modal 😁

Autrement dit, le bouton va en quelque sorte appeler la fenêtre 🙃

Je précise également que tu peux retrouver toutes les informations sur l'utilisation de bootstrap via ce lien

Dis-moi si ça fonctionne de ton côté 😊

A très vite 😇

Cette pub permet au site de vivre ...

Space001

Le 07 janvier 2022 à 16:22

Re,

Aucun soucis, je suis content d'avoir pu t'aider à résoudre ton problème 😉

Bonne après-midi à toi 😇

Compte-supprimé

Le 07 janvier 2022 à 14:23

Salut, Merci beaucoup pour ton aide, ça m'a permis de beaucoup mieux comprendre le code 😁. Grâce au lien que tu m'as envoyé, j'ai compris mon erreur. En fait j'avais oublié de mettre ça dans ma page qui permet d'inclure tous les javascript de boostrap 🤦‍♂️. Désolé du dérangement pour un truc si bête et merci encore pour ton aide 🙏😄!

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Space001

Le 07 janvier 2022 à 12:16

Re @Blach,

As-tu pensé à associer un bouton avec la fenêtre modal en question ? 🤔

Je te donne un exemple fonctionnel :

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Code provenant du site : https://getbootstrap.com

Comme tu as pu le voir, la balise <button> impliquant le bouton est associée aux paramètres spécifiques de la fenêtre modal 😉

Autrement dit, le bouton va en quelque sorte appeler la fenêtre 🙃

Je précise également que tu peux retrouver toutes les informations sur l'utilisation de bootstrap via ce lien

Dis-moi si ça fonctionne de ton côté 😊

A très vite 😇

Compte-supprimé

Le 06 janvier 2022 à 22:28 (Édité)

Salut, désolé de m'être trompé ^^, j'envoie ça !

Cela correspond à ma page "menubar.php" dans laquelle j'ai ducoup utilisé la navbar de boostrap qui pour le coup fonctionne super, et aussi le code pour le modal qui lui ne fonctionne pas. (là il y a toute la page et plus bas j'ai mis le modal) Merci d'avance pour votre aide :) !

<!doctype html>


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.php">OP</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="members.php">Members</a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <?php
                        if(isset($_SESSION['Id'])){
                    ?>
                    <li class="nav-item">
                    <a class="nav-link" href="" data-bs-toggle="modal" data-bs-target="#staticBackdrop">My profile</a>  
                    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span> 
                          </button>
                        </div>
                        <div class="modal-body">
                          ...
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          <button type="button" class="btn btn-primary">Understood</button>
                        </div>
                      </div>
                    </div>
                  </div>        
                    </li>
                    <li class="nav-item">
                            <a class="nav-link" href="disconnect.php">Disconnect</a>    
                    </li>
                    <?php
                        }else{
                    ?>
                    <li class="nav-item">
                            <a class="nav-link" href="registration.php">Register</a>    
                    </li>
                    <li class="nav-item">
                            <a class="nav-link" href="login.php">Log in</a>    
                    </li>
                    <?php
                        }
                   </nav>     ?>
                </ul>
            </div>
        </div>

Le problème vient d'ici, c'est le code copié de boostrap, celui qui devrait faire apparaître un modal ! (Enfin je ne sais pas s'il vient d'ici j'avoue x) c'est juste que c'est ici que le modal est censé être codé)

<li class="nav-item">
                    <a class="nav-link" href="" data-bs-toggle="modal" data-bs-target="#staticBackdrop">My profile</a>  
                    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span> 
                          </button>
                        </div>
                        <div class="modal-body">
                          ...
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          <button type="button" class="btn btn-primary">Understood</button>
                        </div>
                      </div>
                    </div>
                  </div>        
                    </li>

Space001

Le 06 janvier 2022 à 16:55

Hello @Blach 😁

Étant donné qu'il s'agit d'un problème en lien avec bootstrap, j'ai déplacé ton topic dans la catégorie "Framework" 😉

Concernant ton soucis, pourrais-tu nous envoyer ton code car je t'avoue que c'est assez flou 😅

A très vite 😎

Cette pub permet au site de vivre ...

Modal ne voulant pas s'afficher

5 commentaires