Bagaimana saya bisa memicu modal Bootstrap secara terprogram?

Jika saya pergi ke sini

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

Dan klik 'Luncurkan modal demo' itu melakukan hal yang diharapkan. Saya menggunakan modal sebagai bagian dari proses pendaftaran saya dan ada validasi sisi server yang terlibat. Jika ada masalah, saya ingin mengarahkan pengguna ke modal yang sama dengan pesan validasi saya ditampilkan. Saat ini saya tidak tahu cara mendapatkan modal untuk ditampilkan selain klik fisik dari pengguna. Bagaimana saya bisa meluncurkan model secara terprogram?

Untuk menampilkan secara manual modal pop up, Anda harus melakukan ini

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

Anda sebelumnya perlu menginisialisasi dengan show: falsesehingga tidak akan muncul sampai Anda melakukannya secara manual.

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

Di mana myModalid dari wadah modal.

Anda tidak boleh menulis data-toggle = "modal" di elemen yang memicu modal (seperti tombol), dan Anda secara manual dapat menunjukkan modal dengan:

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

dan sembunyikan dengan:

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

Jika Anda mencari kreasi modal terprogram, Anda mungkin suka ini:

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

Meskipun modal Bootstrap menyediakan cara javascript untuk pembuatan modal, Anda masih perlu menulis markup html modal terlebih dahulu.

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

Anda dapat menampilkan model melalui jquery (javascript)

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

Demo: di sini

atau Anda bisa menghapus kelas "sembunyikan"

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

​

Saya ingin melakukan ini dengan angular (2/4)cara, inilah yang saya lakukan:

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

Hal-hal penting yang perlu diperhatikan :

• visible adalah variabel (boolean) dalam komponen yang mengatur visibilitas modal.
• showdan inkelas bootstrap.

Contoh komponen & html

Komponen

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

Kode berikut berguna untuk membuka modal pada fungsi openModal () dan menutup pada closeModal ():

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

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

/ * #myModal adalah id dari modal popup * /