web-dev-qa-db-fra.com

Bootstrap 4 .modal ('hide') ne fonctionne pas

Je crée un modal très simple, mais légèrement modifié, pour montrer un iFrame. J'ouvre le modèle par une fonction javascript et la fonction d'appel modal fournie par bootstrap. Dans mon modal, j'ai placé une icône pour fermer le modal. Si je clique sur cette icône de fermeture, le modal ne se cache pas. J'utilise un javascript onclick avec les fonctions .modal('show') et .modal('hide') fournies par bootstrap. Le modal ne se cache pas, mais le journal de ma console est déclenché. 

Je sais qu'il y a beaucoup de questions avec un problème similaire, mais ces questions ne contenaient pas la réponse que je cherchais. Je sais que css en html n’est pas correct, mais je faisais du prototypage rapide, alors pardonnez-moi pour cela.

Code

Lien ouvert pour modal

<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

Le HTML modal

<!-- Modal -->
<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">

  <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" onClick="closeModal()"></i>

  <div class="body-modal" style="max-width: 90%; margin: 0 auto; overflow: scroll;">

    <div id="clip" style="overflow:scroll;">
        <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
    </div>

  </div>  

</div>

Le JS 

function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};

Mon principal problème est que mon modal est affiché, déclenche également le console.log pour afficher et masquer, mais après avoir cliqué sur le bouton de fermeture, le modal ne se cache pas.

javascriptjquerytwitter-bootstrapbootstrap-4
9
Gijsberts

TLDR;

Il semble que vous _ avez besoin du modal-dialog div dans votre modal pour que .modal('hide') ou data-dismiss="modal" fonctionne.

-

J'ai résolu votre problème en changeant la classe body-modal en modal-dialog. (et a changé votre icône de fermeture en rouge afin qu'elle soit mieux visible dans l'extrait de code)

function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">
  <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: red; top: 40px; cursor: pointer; z-index: 1700;" onClick="closeModal()">close</i>
  <div class="modal-dialog" style="max-width: 90%; margin: 0 auto; overflow: scroll;">
    <div id="clip" style="overflow:scroll;">
      <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
    </div>
  </div>
</div>

Mais maintenant, le modal est un peu en désordre (visuellement).

Je vous recommande de vérifier la documentation modale . Avec les fonctionnalités incluses dans Bootstrap 4, vous enlèverez probablement la plupart de vos CSS et JS supplémentaires (en ligne) et ainsi vous assurerez que tout fonctionne bien dans la plupart des navigateurs.

3
Klooven

Si vous supprimez la classe fade, cela fonctionnera bien.

Je pense que vous avez besoin d'un modal-dialog div si vous souhaitez utiliser la classe fade. En outre, utilisez un seul type de modaux de fermeture/ouverture, soit le mode js ou le data-toggle/data-dismiss.

2
Joel García

Vous pouvez utiliser data-rejet = "modal" pour fermer le modal

<i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" data-dismiss="modal" ></i>

0
Manpreet