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

204

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?

Hoa
quelle

Antworten:

365

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?

Claudio Redi
quelle
Vielen Dank. Das hat geklappt. Eine Beobachtung ist jedoch, dass beim Öffnen des Modalfelds das Scrollen zurückgesetzt wird und wenn ich das Modalfeld unten auf der Seite ausgelöst habe, die Seite nach oben gescrollt wird. Wie soll ich das aufhalten?
Divinedragon
@tdubs: komisch, es sollte funktionieren. Siehe den neuesten Modalcode github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js . Soweit ich sehe, sollte es noch funktionieren
Claudio Redi
1
@ClaudioRedi, ich habe beide in der Konsole ausprobiert, ich finde, dass nur eine mit Chrom funktioniert. $ ('# myModal'). modal ({show: false}) funktioniert nicht, aber $ ('# myModal'). modal ('hide') funktioniert. Ich weiß nicht warum
Tyrone Wilson
1
Gibt es eine Möglichkeit, einen benutzerdefinierten Wert oder Parameter als Option wie $ ('# myModel') zu übergeben. Model ({data: 1, show: false})
Anup Sharma
4
@divinedragon altert später, ich weiß, aber das Problem beim Scrollen zum Anfang der Seite ist wahrscheinlich darauf zurückzuführen, dass das Popup mit einem Tag wie ausgelöst wird '<a href='#'>und der Handler nicht return falseoder nicht preventDefaultim Handler angezeigt wird. Der Browser führt die Anweisungen aus und scrollt zum Standardanker - dem oberen Rand der Seite. Ich habe mich mehrmals beißen lassen, da unser CSS manchmal darauf angewiesen ist, ein hrefpassendes Set für das Styling zu haben.
Brichins
54

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');
nandop
quelle
Ich habe eine URL, die das Modal mit Datenumschaltung öffnet. Dann habe ich innerhalb des Modals eine Schaltfläche, die eine Funktion aufruft, die als letztes das Modal mit der von Ihnen vorgeschlagenen Hide-Methode schließt. Toll!
JayJay
17

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.

Nakupanda
quelle
13

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

tvshajeer
quelle
9

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>

.

HaNdTriX
quelle
4

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-->
Anand Rockzz
quelle
2

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 * /

rohit parte
quelle
1
Bitte erläutern Sie, was der Code beim Veröffentlichen von Antworten bewirkt.
Artemis vertraut SE