web-dev-qa-db-fra.com

Bootstrap close modal ne fonctionne pas

J'ai deux boutons ici qui sont utilisés pour fermer le modal. Le premier est l'icône de fermeture et le second est un bouton d'annulation. Les deux utilisent data-ignore pour fermer le mode. Cependant, les deux ne fonctionnent pas. J'utilise le même code pour un autre modal et là, ils fonctionnent bien. Des suppositions? 

<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
    <div class="modal-dialog">
        <div id="timeSelectModalContent" class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <label>
                <input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
                <label class="checkbox-label">Thursday, 08:00 pm.</label>
            </label>
            <br>
            <label>
                <input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
                <label class="checkbox-label">Thursday, 09:30 pm.</label>
            </label>
            <div id="time-modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
            </div>
        </div>
    </div>
</div>
javascripthtmlmodal-dialogbootstrap-modal
4
NoorUllah

Sujet très ancien, mais il apparaît toujours en premier lieu pour les personnes cherchant ce problème, probablement en raison de la même erreur simple que j'ai commise, qui consistait à ne pas garantir que la division modale se trouvait en dehors de la division principale à partir de laquelle elle avait été lancée. Pour utiliser le kit de matériel à titre d'exemple, vous devez vérifier que le div "#myModal" cible se trouve en dehors de la balise div de fermeture de votre conteneur principal.

<div class="main main-raised">
    <div class="container">
    <!--                 modals -->
        <div class="row" id="modals">
            <div class="col-md-6">
                <button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal">
                    Classic modal
                </button>
            </div>

        </div>
    <!--                 end modals              -->
    </div>
</div>

<!-- Classic Modal -->
<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" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">clear</i>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Hey hey</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-simple">Nice Button</button>
                <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--  End Modal -->
15
Dave Dold

Commencez par vérifier que le fichier bootstrap.js est correctement inclus dans votre code HTML.

Vous pouvez essayer ce code et remplacer la balise button pour la fermeture modale par -

<a href="#" class="close" data-dismiss="modal" aria-label="close">&times;</a>

Si cela ne fonctionne toujours pas .. Faites le moi savoir!

Vous pouvez ajouter un événement sur clic sur un bouton de fermeture dans jQuery. Comme ça-

$("#yourModal").modal("hide");
4
Yashwardhan Pauranik

Essayez toujours de placer le code HTML d'un modal au plus haut niveau de votre document afin d'éviter que d'autres composants nuisent à son apparence et/ou à ses fonctionnalités.

3
nazmulhaqued

Juste après ce code où vous voulez et voir ce qui est dans votre code !!!  

<html lang="en">
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click Here</h2>
<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>
2
Mr. HK

Pour moi, modal n'était pas fermé parce que les fichiers de script étaient en conflit, donc utilisé le nombre minimum de fichiers de script requis pour vérifier le problème lors de la fermeture de model.Way, j'ai ajouté des scripts pour lesquels le modèle était fermé correctement

"scripts": [
          "src/assets/js/lib/jquery/jquery.min.js",
          "src/assets/js/lib/bootstrap/js/popper.min.js",
          "src/assets/js/lib/bootstrap/js/bootstrap.min.js"
        ]

Et bien sûr, j'avais ajouté bootstrap.min.css dans les styles.

0
Gaurav Singh