Comment puis-je déclencher une modale Bootstrap de manière programmatique ?

Question

Si je vais ici

http://getbootstrap.com/2.3.2/javascript.html#modals

Et cliquez sur "Lancer la modale de démonstration", ce qui donne les résultats escomptés. J'utilise la modale dans le cadre de mon processus d'inscription et une validation côté serveur est nécessaire. En cas de problème, je veux rediriger l'utilisateur vers la même modale avec mes messages de validation affichés. Pour l'instant, je n'arrive pas à trouver comment faire en sorte que la modale s'affiche autrement que par un clic physique de l'utilisateur. Comment puis-je lancer le modèle de manière programmatique ?

Answer 1

Pour afficher manuellement la fenêtre pop-up modale, vous devez procéder ainsi

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

Vous devez auparavant l'initialiser avec show: false donc il ne s'affichera pas jusqu'à ce que vous le fassiez manuellement.

$('#myModal').modal({ show: false})

Où myModal est l'identifiant du conteneur modal.

Answer 2

Vous ne devriez pas écrire data-toggle="modal" dans l'élément qui a déclenché la modale (comme un bouton), et vous pouvez afficher manuellement la modale avec :

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

et se cacher avec :

$('#myModal').modal('hide');

Answer 3

Ceci est un code pour Bootstrap v5 sans jQuery .

let myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
myModal.show();

Démo

Et ceci est un codesandbox Démonstration de l'ouverture programmée d'une modale au chargement d'une page.

https://idu6i.csb.app/

Réf.

• https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
• https://getbootstrap.com/docs/5.0/components/modal/#show

Answer 4

Si vous êtes à la recherche d'une création modale programmée, vous pourriez aimer ceci :

http://nakupanda.github.io/bootstrap3-dialog/

Même si la modale de Bootstrap permet de créer une modale en javascript, vous devez d'abord écrire les balises html de la modale.

Answer 5

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
  Launch demo modal
</button>

<!-- 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-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</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>

JS

$('button').click(function(){
$('#myModal').modal('show');
});

DEMO JSFIDDLE