Partage

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.

MarcosMeneghetti1

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

Marcos Meneghetti

+33 7 85 68 06 59

France

JGui_PACA

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 JGui_PACA 27 septembre 2021 à 11:16:46

Mewen_bzh

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

Je ne réponds pas aux messages privés.

JGui_PACA

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.

Mewen_bzh

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

Je ne réponds pas aux messages privés.

JGui_PACA

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>

Lord Morpheus

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.

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