web-dev-qa-db-fra.com

Comment déclencher un modal Bootstrap par programme?

Si je vais ici

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

Et cliquez sur 'Lancer la démo modale', cela fait l'effet attendu. J'utilise le modal dans le cadre de mon processus d'inscription et la validation côté serveur est impliquée. S'il y a des problèmes, je souhaite rediriger l'utilisateur vers le même modal avec mes messages de validation affichés. Pour le moment, je ne vois pas comment faire afficher le modal autrement que par un clic physique de l'utilisateur. Comment puis-je lancer le modèle par programme?

javascripttwitter-bootstrap
185
Hoa

Pour afficher manuellement la fenêtre contextuelle modale, vous devez le faire.

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

Vous devez auparavant l’initialiser avec show: false pour qu’il ne s’affiche pas avant de le faire manuellement.

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

Où myModal est l'id du conteneur modal.

335
Claudio Redi

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

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

et se cacher avec:

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

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 une méthode javascript pour la création modale, vous devez tout d’abord écrire les balises HTML de modal.

16
nakupanda

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

11
tvshajeer

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

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

Démo: ici

ou vous pouvez simplement supprimer la classe "masquer"

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

Un séjour sans faille

7
HaNdTriX

Je voulais faire ceci de la manière 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>`

Points importants à noter :

  • visible est une variable (booléenne) du composant qui régit la visibilité du modal.
  • 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');
    }
  }
  showRsvpModal() {
    this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block');
    this.renderer.addClass(this.rsvpModal.nativeElement, 'show');
  }

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-->
3
Anand Rockzz