web-dev-qa-db-fra.com

empêche l'ouverture du boot modal lorsqu'un clic sur un bouton

J'ai une page avec plusieurs modaux bootstrap avec:

data-toggle="modal" data-target="#modal-12345"

Le problème, c’est que j’ai une ligne entière sur laquelle on peut cliquer, comme

<tr data-toggle="modal" data-target="#modal-12345">

Le contenu modal se trouve dans une autre rangée de tableau masquée juste en dessous, suivie de la rangée suivante pouvant être cliquée, etc. Cette ligne contient également un bouton qui permet d'accéder à une autre page lorsque l'utilisateur clique dessus.

J'ai besoin de toute la ligne cliquable pour ouvrir le modal, sauf lorsque le bouton permettant d'accéder à l'autre page est cliqué, je dois alors empêcher le modal de s'ouvrir.

J'ai besoin de quelque chose comme ça

<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>

Mais en ciblant ceci:

data-toggle="modal"

J'ai aussi essayé de donner à la TR une classe de "modaltoggle" et de l'appeler ensuite avec le javascript comme.

javascriptjqueryhtmlcsstwitter-bootstrap
11
user1227914

Ajoutez une sorte d'identificateur pour l'élément que vous ne voulez pas déclencher, une classe telle que no-modal par exemple, puis ajoutez dans votre jQuery un code pour l'événement show.bs.modal du modal. Capturez le relatedElement, qui est l'élément qui a déclenché l'événement, puis voyez s'il contient la classe que vous recherchez. Si c'est le cas, exécutez e.stopPropagation().

BOOTPLY

jQuery:

$('#myModal').on('show.bs.modal', function (e) {
  var button = e.relatedTarget;
  if($(button).hasClass('no-modal')) {
    e.stopPropagation();
  }  
});

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</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" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Comme vous pouvez le constater, le deuxième bouton a une classe appelée no-modal. Lorsque vous cliquez dessus, jQuery vérifie l'existence de cette classe et, si elle existe, empêche le modal de s'afficher. En cliquant sur le premier bouton, le modal s'affiche normalement car il n'a pas cette classe.

Les modaux d'amorçage déclenchent des événements spécifiques lorsqu'ils sont affichés par un élément de la page, à partir du moment où ils sont déclenchés jusqu'au moment où ils sont entièrement apparus. Vous pouvez lire sur ces événements pour avoir une idée de ce à quoi vous pouvez les utiliser en consultant la section Événements pour les modaux Bootstrap dans la documentation officielle.

12
MattD

Voici un JSFiddle pour démontrer ce que je vais expliquer: http://jsfiddle.net/68y4zb3g/

Comme MattD l'a expliqué et démontré, il est assez facile d'empêcher le lancement d'un modal, bien que son exemple s'applique à l'application modale standard. Puisque vous utilisez le .btn dans votre code de script, je suppose que vous l'avez appliqué à tous vos boutons en question. J'ai également supposé que le code modal était similaire à celui de la page de démonstration Bootstrap. Si vous fournissez votre code de table réel, je peux l’adapter spécifiquement à ce que vous avez déjà.

$('tr .btn').on('click', function(e) {
   e.stopPropagation();
});
td {
    border: 1px #000000 solid;
    padding: 10px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<table>
    <tr data-toggle="modal" data-target="#modal-12345">
        <td>Launch modal 12345</td>
        <td><button id="btn-12345" class="btn">12345</button></td>
    </tr>
    <tr>
        <td colspan="2" class="modal fade" id="modal-12345" 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-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        12345
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

Remarque: j'ai remplacé la DIV qui ferait normalement office d'enveloppe externe du modal pour la TD et ajouté un petit morceau de code CSS pour faciliter la visualisation de la séparation dans le contenu.

En utilisant une classe qui est appliquée à tous les boutons, vous n'avez pas besoin d'écrire une fonction pour chaque ID. Cela dit, je vous recommande d’utiliser une classe personnalisée comme déclencheur. .btn est une classe standard au sein du noyau de Bootstrap. Essayez donc d'utiliser .modalBtn pour éviter tout risque de conflit avec les fonctionnalités légitimes de Bootstrap.

J'espère que cela t'aides. ^^

14
Christopher Esbrandt
$('#myModal').on('show.bs.modal', function (e) {
 return e.preventDefault(); 
});

OR

<button type="button" class="custom" data-toggle="modal" data-target-custom="#myModal">Launch demo modal</button>
<script>
target = $(".custom").attr('data-target-custom');
if(condition) {
 $(target).modal('show');
}
</script>

e.stopPropagation (); ou e.preventDefault (); cela ne fonctionnera pas si vous rouvrez modal ou si vous utilisez plusieurs modaux dans votre page.

1
Chirag Rathore