Javascript Girl
  1. Javascript Girl
  3. Problème modale de modus Modus de Bootstrap
Intereting Posts
L'histoire de location.hash et back Nested JSON: Comment ajouter (pousser) de nouveaux éléments à un objet? Cliquez sur un bouton chaque seconde Chargez le fichier .txt à partir de javascript avec jquery Utilisation du symbole @ dans les noms de module de nœud Pourquoi la fenêtre ou le document ne peuvent-ils pas être définis comme étant indéfinis ou nuls? D3.js geoJSON et limites Reliez une fonction sur plusieurs éléments jQuery à la fois Le filtre table ne fonctionne pas avec les espaces arrière Keyup (function ()) délai de demande ajax – jQuery Knockout plusieurs liaisons sur les éléments dom nichés L'événement jquery ne fonctionne pas après l'ajout Angular2 Hidden Ignorés Chrome refuse d'exécuter un script AJAX en raison d'un mauvais type MIME Javascript / jQuery – Comment convertir les données Media et Image en format texte binaire

Problème modale de modus Modus de Bootstrap

J'ai une page où un mode Bootstrap ouvre un autre mode.

Le problème est que, à chaque mode ouvert, il ajoute

<div class="modal-backdrop fade in"></div>

Au code HTML. C'est bon pour le premier, mais comme c'est l' opacity: .5; Cela rend la page plus sombre sur chaque mode ouvert. Existe-t-il un moyen de vérifier si un cadre modal-backdrop existe déjà et, dans ce cas, ne pas ouvrir un autre?

J'ouvre mes modes avec

<a href="" data-target="#modal_01" data-toggle="modal">Modal</a>

Ou avec jQuery:

$('#modal_01').modal('show');

Toute aide à ce problème est grandement appréciée!

Voici un violon pour votre commodité: https://jsfiddle.net/zsk4econ/1/

Voici la démonstration de travail qui, selon moi, va dans votre cas. 

  $(".modal").on("shown.bs.modal", function () { if ($(".modal-backdrop").length > 1) { $(".modal-backdrop").not(':first').remove(); } }) 
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/js/bootstrap.min.js"></script> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal2" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Open Modal 3</button> </div> </div> </div> </div> </div>

Laissez CSS le gérer. 

 .modal-backdrop:nth-child(2n-1) { opacity : 0; }

https://jsfiddle.net/zsk4econ/3/

Vous pouvez ajouter / supprimer des données-backdrop = "false" attribut dépend de l'exigence. Sinon, vous pouvez également inclure css comme 

 .modal-backdrop+.modal-backdrop { opacity : 0; } 
 $(document).on('show.bs.modal', '.modal', function () { if ($(".modal-backdrop").length > -1) { $(".modal-backdrop").not(':first').remove(); } });