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

Vous pouvez afficher le modèle via jquery (javascript)

$('#yourModalID').modal({
  show: true
})

Démonstration : ici

ou vous pouvez simplement supprimer la classe "hide".

<div class="modal" id="yourModalID">
  # modal content
</div>

Answer 2

Je voulais faire ça le angular (2/4) Voici ce que j'ai fait :

<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`

Les choses importantes à note :

• visible est une variable (booléenne) dans le composant qui régit la visibilité de la modale.
• show et in sont des classes bootstrap.

Un exemple composant & html

Composant

@ViewChild('rsvpModal', { static: false }) rsvpModal: ElementRef;
..
@HostListener('document:keydown.escape', ['$event'])
  onEscapeKey(event: KeyboardEvent) {
    this.hideRsvpModal();
  }
..
  hideRsvpModal(event?: Event) {
    if (!event || (event.target as Element).classList.contains('modal')) {
      this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'none');
      this.renderer.removeClass(this.rsvpModal.nativeElement, 'show');
      this.renderer.addClass(document.body, 'modal-open');
    }
  }
  showRsvpModal() {
    this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block');
    this.renderer.addClass(this.rsvpModal.nativeElement, 'show');
    this.renderer.removeClass(document.body, 'modal-open');
  }

Html

<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="niviteRsvpModalTitle">

                </h5>
                <button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary bg-white text-dark"
                    (click)="hideRsvpModal()">Close</button>
            </div>
        </div>
    </div>
</div>
<!--E:RSVP-->

Answer 3

Le code suivant permet d'ouvrir la modale avec la fonction openModal() et de la fermer avec la fonction closeModal() :

      function openModal() {
          $(document).ready(function(){
             $("#myModal").modal();
          });
      }

     function closeModal () {
          $(document).ready(function(){
             $("#myModal").modal('hide');
          });  
      }

/* #myModal est l'identifiant de la popup modale */

Answer 4

La même chose m'est arrivée. Je voulais ouvrir la modale Bootstrap en cliquant sur les lignes du tableau et obtenir plus de détails sur chaque ligne. J'ai utilisé une astuce pour faire cela, que j'appelle le bouton virtuel ! Compatible avec la dernière version de Bootstrap (v5.0.0-alpha2). Il pourrait être utile pour d'autres aussi.

Voir cet extrait de code avec aperçu : https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba

Résumé :

let exampleButton = document.createElement("button");
exampleButton.classList.add("d-none");
document.body.appendChild(exampleButton);
exampleButton.dataset.toggle = "modal";
exampleButton.dataset.target = "#exampleModal";

//AddEventListener to all rows
document.querySelectorAll('#exampleTable tr').forEach(row => {
    row.addEventListener('click', e => {
        //Set parameteres (clone row dataset)
        exampleButton.dataset.whatever = e.target.closest('tr').dataset.whatever;
        //Button click simulation
        //Now we can use relatedTarget
        exampleButton.click();
    })
});

Tout cela consiste à utiliser le relatedTarget la propriété. (Voir Documentation sur Bootstrap )