Comment déclencher un modal Bootstrap par programmation?

Si je vais ici

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

Et cliquez sur «Lancer la démo modale», cela fait la chose attendue. J'utilise le modal dans le cadre de mon processus d'inscription et une validation côté serveur est impliquée. S'il y a des problèmes, je veux rediriger l'utilisateur vers le même modal avec mes messages de validation affichés. Pour le moment, je ne peux pas comprendre comment obtenir le modal à afficher autre qu'un clic physique de l'utilisateur. Comment puis-je lancer le modèle par programme?

Pour afficher manuellement le pop-up modal, vous devez le faire

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

Vous devez auparavant l'initialiser avec show: falsepour qu'il ne s'affiche pas tant que vous ne l'avez pas fait manuellement.

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

Où myModalest l'id du conteneur modal.

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

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

et cachez avec:

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

Si vous recherchez une création modale programmatique, vous aimerez peut-être ceci:

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

Même si le modal de Bootstrap fournit un moyen javascript pour la création modale, vous devez toujours écrire les balises html de modal en premier.

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

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

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

Démo: ici

ou vous pouvez simplement supprimer la classe "cacher"

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

La

Je voulais faire ça angular (2/4)comme ça, voici ce que j'ai fait:

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

Choses importantes à noter :

• visible est une variable (booléenne) dans le composant qui régit la visibilité du modal.
• showet insont des classes bootstrap.

Un exemple de 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-->

Le code suivant utile pour ouvrir modal sur la fonction openModal () et fermer sur closeModal ():

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

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

/ * #myModal est l'id du popup modal * /