Wie kann ich ein Bootstrap-Modal programmgesteuert auslösen?

Wenn ich hierher gehe

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

Und klicken Sie auf "Demo modal starten", um das erwartete Ergebnis zu erzielen. Ich verwende das Modal als Teil meines Anmeldevorgangs und es ist eine serverseitige Validierung erforderlich. Wenn es Probleme gibt, möchte ich den Benutzer mit den angezeigten Validierungsnachrichten auf dasselbe Modal umleiten. Im Moment kann ich nicht herausfinden, wie das Modal außer einem physischen Klick des Benutzers angezeigt werden kann. Wie kann ich das Modell programmgesteuert starten?

Um das modale Popup manuell anzuzeigen, müssen Sie dies tun

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

Sie müssen es zuvor mit initialisieren, show: falsedamit es erst angezeigt wird, wenn Sie es manuell ausführen.

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

Wo myModalist die ID des modalen Containers?

Sie sollten data-toggle = "modal" nicht in das Element schreiben, das das Modal ausgelöst hat (wie eine Schaltfläche), und Sie können das Modal manuell anzeigen mit:

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

und verstecke dich mit:

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

Wenn Sie nach einer programmatischen Modalerstellung suchen, werden Sie dies vielleicht lieben:

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

Obwohl das Modal von Bootstrap eine Javascript-Methode für die Modalerstellung bietet, müssen Sie zuerst die HTML-Markups von Modal schreiben.

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

Sie können das Modell über jquery (Javascript) anzeigen.

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

Demo: hier

oder Sie können einfach die Klasse "verstecken" entfernen

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

.

Ich wollte das angular (2/4)so machen, hier ist was ich gemacht habe:

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

Wichtige Dinge zu beachten :

• visible ist eine Variable (Boolescher Wert) in der Komponente, die die Sichtbarkeit des Modals bestimmt.
• showund insind Bootstrap-Klassen.

Ein Beispiel Komponente & html

Komponente

@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-->

Der folgende Code ist nützlich, um Modal in der Funktion openModal () zu öffnen und in closeModal () zu schließen:

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

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

/ * #myModal ist die ID des modalen Popups * /