Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bootstrap - modal ne s'affiche pas

Sujet résolu
    26 septembre 2021 à 15:19:34

    Bonjour,

    J'essaye désespérément d'afficher une modale. J'ai tout re-vérifié plusieurs fois mais impossible d'afficher la fenêtre modale.

    De plus il n'y a aucune erreur dans la console et le lien avec le ccs se fait correctement.

    Mon code :

     <link rel="stylesheet" href="bootstrap_511/css/bootstrap.min.css">
    
     <script type="text/javascript" src="bootstrap_511/js/jquery-3.6.0.min.js"></script>
     <script type="text/javascript" src="bootstrap_511/js/bootstrap.min.js"></script>
    
    <button type="button" data-toggle="modal" class="btn btn-primary btn-lg" data-target="#myModal"><i class="icon icon-sign-out icon-lg"></i> Bouton</button>
    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Titre de la modale</h4>
                </div>
                <div class="modal-body">
                    <p>Corps de la modale</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button"><i class="icon icon-check icon-lg"></i> Valide</button>
                    <button class="btn btn-inverse" type="button" data-dismiss="modal"><i class="icon icon-times icon-lg"></i> Fermer</button>
                </div>
            </div>
        </div>
    </div>


    Merci de votre aide.

    • Partager sur Facebook
    • Partager sur Twitter
      26 septembre 2021 à 21:20:15

      Salut,

      Est-ce que tu as déjà essayer de faire avec les scripts (ligne 3 et 4) en metant après la ligne 24? Normalement les scripts de bootstrap sont toujours a la fin avant </body>

      Je ne vois pas les tags <doctype> <html> <head> ni <body>. Est-ce que tu as vu la documentation de Bootstrap par rapport les modal?

      Bon courage

      Marcos

      • Partager sur Facebook
      • Partager sur Twitter

      Marcos Meneghetti 

      +33 7 85 68 06 59

      France

        27 septembre 2021 à 11:13:15

        Bonjour,

        Merci de la réponse.

        Oui je n'avais pas mis tout le code mais tous les tags sont bien présents.

        J'ai lu la doc Bootstrap et j'ai cherché des réponses sur plusieurs forums déjà.

        J'ai récréé une "page test" sans rien d'autre et avec les lignes 3 et 4 juste avant body mais ça ne marche toujours pas :

        <!doctype html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Page test</title>
        
        </head>
        
        <body>
        
        <link rel="stylesheet" href="bootstrap_511/css/bootstrap.min.css">
        
         
        <button type="button" data-toggle="modal" class="btn btn-primary btn-lg" data-target="#myModal"><i class="icon icon-sign-out icon-lg"></i> Bouton</button>
         
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Titre de la modale</h4>
                    </div>
                    <div class="modal-body">
                        <p>Corps de la modale</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" type="button"><i class="icon icon-check icon-lg"></i> Valide</button>
                        <button class="btn btn-inverse" type="button" data-dismiss="modal"><i class="icon icon-times icon-lg"></i> Fermer</button>
                    </div>
                </div>
            </div>
        </div>
        
         
         <script type="text/javascript" src="bootstrap_511/js/jquery-3.6.0.min.js"></script>
         <script type="text/javascript" src="bootstrap_511/js/bootstrap.min.js"></script>
              
          </body>
        </html>

        J'ai récupéré le fichier bootstrap.min.js directement du site getbootstrap.com et le fichier jquery de ce site https://jquery.com/download/. 

        Est-ce que l'erreur pourrait venir de ces fichiers?

        Merci.

        -
        Edité par JonathanGuitard 27 septembre 2021 à 11:16:46

        • Partager sur Facebook
        • Partager sur Twitter
          27 septembre 2021 à 11:22:09

          Bonjour,

          Prenons les choses dans l'ordre : 

          <link rel="stylesheet" href="bootstrap_511/css/bootstrap.min.css">
          

          L'appel au CSS de Bootstrap devrait se trouver dans le <head> de ton HTML et non dans le <body> comme c'est le cas actuellement. ;)

          Si ce la ne règle pas ton problème, serait-il possible d'avoir des screenshots de ta structure de dossiers et de fichiers stp ? Ceci afin de vérifier les différents chemins d'accès. 

          -
          Edité par Mewen_bzh 27 septembre 2021 à 11:33:52

          • Partager sur Facebook
          • Partager sur Twitter
            27 septembre 2021 à 11:48:21

            Bonjour Mewen,

            J'ai bien passé le bootstrap.min.css dans le <head>. Cela n'a rien changé.

            <!doctype html>
            <html lang="en">
              <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>Page test</title>
            <link rel="stylesheet" href="bootstrap_511/css/bootstrap.min.css">
            </head>
            
            <body>
             
            <button type="button" data-toggle="modal" class="btn btn-primary btn-lg" data-target="#myModal"><i class="icon icon-sign-out icon-lg"></i> Bouton</button>
             
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                            <h4 class="modal-title">Titre de la modale</h4>
                        </div>
                        <div class="modal-body">
                            <p>Corps de la modale</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" type="button"><i class="icon icon-check icon-lg"></i> Valide</button>
                            <button class="btn btn-inverse" type="button" data-dismiss="modal"><i class="icon icon-times icon-lg"></i> Fermer</button>
                        </div>
                    </div>
                </div>
            </div>
            
             
             <script type="text/javascript" src="bootstrap_511/js/jquery-3.6.0.min.js"></script>
             <script type="text/javascript" src="bootstrap_511/js/bootstrap.min.js"></script>
                  
              </body>
            </html>
            



            Ci-dessous des impressions écrans de mes dossiers.

            • Partager sur Facebook
            • Partager sur Twitter
              27 septembre 2021 à 12:04:02

              Je pense avoir trouvé la réponse, c'est ton code qui est faux.

              Si je regarde la doc de Bootstrap 5 sur les modales (https://getbootstrap.com/docs/5.1/components/modal/#live-demo) :

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

              et que je compare avec ton code : 

              <button type="button" data-toggle="modal" class="btn btn-primary btn-lg" data-target="#myModal">
                  Bouton
              </button>



              Tu utilises les attributs "data-toggle" au lieu de "data-bs-toggle", "data-target au lieu de "data-bs-target", "data-dismiss" au lieu de "data-bs-dismiss", etc.

              -
              Edité par Mewen_bzh 27 septembre 2021 à 12:10:05

              • Partager sur Facebook
              • Partager sur Twitter
                27 septembre 2021 à 14:13:00

                Merci beaucoup. Ca fonctionne ! :)

                2 jours que j'étais bloqué dessus.

                Je n'ai pas trouvé la différence sur google entre "data-bs" et "data". Peut-être une évolution entre les versions Bootstrap.

                Bonne continuation.

                Je mets le code final en dessous:

                <!doctype html>
                <html lang="en">
                  <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <title>Page test</title>
                <link rel="stylesheet" href="bootstrap_511/css/bootstrap.min.css">
                </head>
                
                <body>
                 
                <button type="button" data-bs-toggle="modal" class="btn btn-primary btn-lg" data-bs-target="#myModal"><i class="icon icon-sign-out icon-lg"></i> Bouton</button>
                 
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                                <h4 class="modal-title">Titre de la modale</h4>
                            </div>
                            <div class="modal-body">
                                <p>Corps de la modale</p>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" type="button"><i class="icon icon-check icon-lg"></i> Valide</button>
                                <button class="btn btn-inverse" type="button" data-bs-dismiss="modal"><i class="icon icon-times icon-lg"></i> Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                 
                 <script type="text/javascript" src="bootstrap_511/js/jquery-3.6.0.min.js"></script>
                 <script type="text/javascript" src="bootstrap_511/js/bootstrap.min.js"></script>
                      
                  </body>
                </html>
                



                • Partager sur Facebook
                • Partager sur Twitter
                  28 septembre 2021 à 12:18:35

                  JonathanGuitard a écrit:

                  Je n'ai pas trouvé la différence sur google entre "data-bs" et "data". Peut-être une évolution entre les versions Bootstrap.

                  Parce qu'il n'y a aucune réelle différence. Ils ont simplement décidé d'appelé leur attribut data-bs-* sur la version 5 au lieu de simplement data-* des autres versions.

                  Ce changement est surement dû au fait que l'attribut data-* est parfois utilisé pour d'autre fonction. Avec -bs en plus, ils ciblent plus facilement les attributs lié seulement à Bootstrap.

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

                  Bootstrap - modal ne s'affiche pas

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown