web-dev-qa-db-fra.com

La peau modale de Bootstrap ne fonctionne pas

La peau modale bootstrap ne fonctionne pas. Alert intervient autrement. mais mon modal n'est pas caché Ajouté bootply. Mon problème est le même.

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</div>



<script type="text/javascript">
$("#buy").click(function () {
   var a = 4;
   if (a == 5) {
     alert("if");
     $('#myModal').modal('show');
   }
   else {
    alert("else");
    $('#myModal').modal('hide');
   }

});
</script>

bootply

javascriptjquerytwitter-bootstraptwitter-bootstrap-3
20
Sam

Vous utilisez les deux méthodes de basculement modal: via Javascript et via les attributs de données. Votre clic déclenche donc l'exposition modale en tant qu'ensemble d'attributs de données et votre Javascript n'affecte pas ce déclencheur.

Supprimez simplement les attributs de données et utilisez la méthode Javascript:

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>
25
albertedevigo

J'ai eu le même problème, j'ai essayé beaucoup de choses, mais la seule solution qui a fonctionné pour moi est @Tang Chanrith a suggéré de supprimer individuellement certaines parties du modal, mais un peu amélioré pour le placer en arrière et la barre de défilement. Je mettrai ma réponse juste si la réponse acceptée ne fonctionnait pas pour eux. Désolé pour mon anglais. J'espère que j'ai aidé.

@Tang Chanrith

Essayez cette fonction

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $("#myModal").hide();
}

Sollution améliorée

Il vous suffit de supprimer une classe de body et css qui a généré

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $("#myModal").hide();
}
11
Vaios P.

Essayez cette fonction

function hideModal(){
    $("#myModal").removeClass("in");
    $(".modal-backdrop").remove();
    $("#myModal").hide();
}
6
Tang Chanrith

J'ai vérifié votre code . Maintenant vous comparez a == 5. mais a toujours 4. vous devrez peut-être vérifier pourquoi vous effectuez cette comparaison . Vous devez également supprimer la cible de données si vous voulez ouvrir modal depuis javascript:

<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>

data-target ouvrant directement le modal. Vérifiez si cela fonctionne.

1
Kshitiz

essayez d'ajouter return false comme ceci:

$("#buy").click(function () { 
  var a = 4;
  if (a == 5) {
    alert("if");
    $('#myModal').modal('show');
  }
  else {
    alert("else");
    $('#myModal').modal('hide');
  }
  return false;
});
1
iMichaeln

Vous devriez essayer ceci $('.modal.in').modal('hide')

Via https://github.com/twbs/bootstrap/issues/489

1
Feuda

J'ai la solution à ce problème.

$('#landingpage, body').on('click',function(){
    $( ".action-close" ).trigger( "click" );});
1
Takechi Ponchai

J'ai eu le même problème. J'ai essayé la méthode JavaScript suggérée dans l'article, mais malheureusement cela n'a fonctionné que la moitié du temps. Si je déclenche mon modal à quelques reprises, cela bugs. En conséquence, j'ai créé un travail autour de CSS:

/* Hide the back drop*/
.modal-backdrop.show {
    display: none;
}
/* Simulate the backdrop using background color */
.modal-open .modal {
    background-color: rgba(47, 117, 19, 0.3);
}
0
Brenden Stefano

Comme je l'ai rencontré, vous devez parfois supprimer le style d'affichage:

style="display: block;"
0
Mahdi Alkhatib

J'ai eu le même problème, mon erreur était que j'essayais d'ouvrir la fenêtre modale plusieurs fois. Nous devons vérifier que la fenêtre modale n'est pas déjà ouverte avant d'essayer de l'ouvrir.

    if (!($("#MyModal").data('bs.modal') || {})._isShown){ 
        $("#MyModal").modal('show');
    }
0
Mathieu

Dans le code Javascript, vous devez ajouter une ligne de code.

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
0
Prathap Kudupu