1
votes

Modal Bootstrap 4 ne s'affiche pas

J'ai un bouton pour ouvrir un modal Bootstrap 4.

Voici le html:

$('#btn-modal').on('click', function(){    
    $("#editModal").modal('show');  
});

<div
  class="modal fade"
  id="editModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="editModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <form method="post" action="xx">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="editModalLabel">Edit</h4>
          <button type="button" class="close" data-dismiss="modal">
            &times;
          </button>
        </div>
        <div class="modal-body">
          //Modal Body
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <i class="fas fa-times" style="margin-right:5px"></i> Cancel
          </button>
          <button type="submit" name="submit" class="btn btn-success">
            <i class="fas fa-location-arrow " style="margin-right:5px"></i> Save
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

Et voici le JavaScript:

<button
  type="button"
  class="btn btn-info btn-circle btn-sm"
  data-toggle="modal"
  data-target="#editModal"
  id="btn-modal"
>
  <i class="fas fa-fw fa-pencil-alt"></i>
</button>

J'ai ajouté console.log ("clicked") dans la fonction js et il est affiché dans la console. Mais encore, le modal ne s'affiche pas. Quelqu'un peut-il me montrer le bon chemin? Merci.

javascript html bootstrap-4 bootstrap-modal

5 commentaires

Pas besoin de js ici. Son fonctionne bien

Peut-être que vous n'avez pas inclus votre fichier js

@ User863 merci. J'ai supprimé le js, mais cela ne s'affiche toujours pas: (peut-être, y a-t-il quelque chose d'autre à vérifier?

@ Mr.Perfectionist je l'ai inclus, je ne l'ai tout simplement pas posté

@ R.Amalia vérifie la réponse de Yasser Mas

3 Réponses :

0
votes

Assurez-vous que vous importez tous les fichiers js vers la fin de vos pages, juste avant la balise de fermeture , pour les activer. jQuery doit venir en premier, puis Popper.js, puis nos plugins JavaScript, sans compter que le code js n'est pas nécessaire.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

veuillez consulter le lien ci-dessous:

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

0 commentaires

0
votes

Votre code fonctionne pour moi. Tout au plus, supprimez le JS qui est inutile.

Ceci est un jsFiddle avec votre propre code, moins le JS et ça marche très bien!

<button type="button" class="btn btn-info btn-circle btn-sm" data-toggle="modal" data-target="#editModal"><i class="fas fa-fw fa-pencil-alt"></i>Open</button>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form method="post" action="xx">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="editModalLabel">Edit</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          //Modal Body
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-times" style="margin-right:5px"></i> Cancel</button>
          <button type="submit" name="submit" class="btn btn-success"><i class="fas fa-location-arrow " style="margin-right:5px"></i> Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

1 commentaires

Merci. J'ai supprimé le js, mais il ne s'affiche toujours pas: (peut-être, y a-t-il autre chose à vérifier?

0
votes

Ceci est le fichier HTML complet. Si cela ne fonctionne pas, vous avez peut-être désactivé JavaScript dans votre navigateur?!

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

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

    <!-- Modal -->
    <button type="button" class="btn btn-info btn-circle btn-sm" data-toggle="modal" data-target="#editModal"><i
            class="fas fa-fw fa-pencil-alt"></i>Open</button>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form method="post" action="xx">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="editModalLabel">Edit</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        //Modal Body
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-times"
                                style="margin-right:5px"></i> Cancel</button>
                        <button type="submit" name="submit" class="btn btn-success"><i class="fas fa-location-arrow "
                                style="margin-right:5px"></i> Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

0 commentaires