Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

Modal

Gunakan pemalam modal JavaScript Bootstrap untuk menambah dialog pada tapak anda untuk peti cahaya, pemberitahuan pengguna atau kandungan tersuai sepenuhnya.

Pada halaman ini

Bagaimana ia berfungsi

Sebelum bermula dengan komponen modal Bootstrap, pastikan anda membaca perkara berikut kerana pilihan menu kami telah berubah baru-baru ini.

  • Modal dibina dengan HTML, CSS dan JavaScript. Mereka diletakkan di atas segala-galanya dalam dokumen dan alih keluar skrol daripada <body>supaya kandungan modal menatal sebaliknya.
  • Mengklik pada "tirai latar" modal akan menutup modal secara automatik.
  • Bootstrap hanya menyokong satu tetingkap modal pada satu masa. Mod bersarang tidak disokong kerana kami percaya ia merupakan pengalaman pengguna yang lemah.
  • Penggunaan modal position: fixed, yang kadangkala agak khusus tentang pemaparannya. Apabila boleh, letakkan HTML modal anda pada kedudukan peringkat atas untuk mengelakkan kemungkinan gangguan daripada elemen lain. Anda mungkin akan menghadapi masalah apabila membuat sarang .modaldalam elemen tetap yang lain.
  • Sekali lagi, disebabkan position: fixed, terdapat beberapa kaveat mengenai penggunaan modal pada peranti mudah alih. Lihat dokumen sokongan penyemak imbas kami untuk mendapatkan butiran.
  • Disebabkan cara HTML5 mentakrifkan semantiknya, atribut autofocusHTML tidak mempunyai kesan dalam modals Bootstrap. Untuk mencapai kesan yang sama, gunakan beberapa JavaScript tersuai:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Kesan animasi komponen ini bergantung pada prefers-reduced-motionpertanyaan media. Lihat bahagian gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .

Teruskan membaca untuk tunjuk cara dan garis panduan penggunaan.

Contoh

Di bawah ialah contoh modal statikposition (bermaksud dan displaytelah ditindih). Termasuk ialah pengepala modal, badan modal (diperlukan untuk padding), dan pengaki modal (pilihan). Kami meminta anda menyertakan pengepala modal dengan tindakan mengetepikan apabila boleh, atau menyediakan satu lagi tindakan mengetepikan eksplisit.

Tajuk modal

Teks badan modal pergi ke sini.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Demo langsung

Togol demo mod yang berfungsi dengan mengklik butang di bawah. Ia akan meluncur ke bawah dan pudar masuk dari bahagian atas halaman.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Latar belakang statik

Apabila tirai latar ditetapkan kepada statik, modal tidak akan ditutup apabila mengklik di luarnya. Klik butang di bawah untuk mencubanya.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Menatal kandungan panjang

Apabila modal menjadi terlalu panjang untuk port pandangan atau peranti pengguna, ia menatal bebas daripada halaman itu sendiri. Cuba demo di bawah untuk melihat apa yang kami maksudkan.

Anda juga boleh mencipta modal boleh tatal yang membenarkan tatal badan modal dengan menambah .modal-dialog-scrollablepada .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Berpusat secara menegak

Tambahkan .modal-dialog-centeredke .modal-dialogke tengah menegak modal.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Petua alat dan popover

Petua alat dan popover boleh diletakkan dalam modal seperti yang diperlukan. Apabila modal ditutup, sebarang petua alat dan popover di dalamnya juga diketepikan secara automatik.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Menggunakan grid

Gunakan sistem grid Bootstrap dalam modal dengan bersarang .container-fluiddalam .modal-body. Kemudian, gunakan kelas sistem grid biasa seperti yang anda lakukan di tempat lain.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Mempelbagaikan kandungan modal

Mempunyai sekumpulan butang yang semuanya mencetuskan modal yang sama dengan kandungan yang sedikit berbeza? Gunakan event.relatedTargetdan atribut HTMLdata-bs-* untuk mengubah kandungan modal bergantung pada butang yang telah diklik.

Di bawah ialah demo langsung diikuti dengan contoh HTML dan JavaScript. Untuk mendapatkan maklumat lanjut, baca dokumen acara modal untuk butiran tentang relatedTarget.

html 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Togol antara modal

Togol antara berbilang modal dengan beberapa penempatan yang bijak bagi atribut data-bs-targetdan . data-bs-toggleSebagai contoh, anda boleh menogol mod tetapan semula kata laluan dari dalam modal log masuk yang sudah terbuka. Sila ambil perhatian bahawa berbilang modal tidak boleh dibuka pada masa yang sama — kaedah ini hanya bertukar-tukar antara dua modal yang berasingan.

Buka modal pertama
html 
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Tukar animasi

Pembolehubah $modal-fade-transformmenentukan keadaan transformasi .modal-dialogsebelum animasi fade-in modal, $modal-show-transformpembolehubah menentukan perubahan .modal-dialogpada akhir animasi fade-in modal.

Jika anda mahukan contohnya animasi zum masuk, anda boleh menetapkan $modal-fade-transform: scale(.8).

Alih keluar animasi

Untuk modal yang hanya muncul dan bukannya pudar untuk dilihat, alih keluar .fadekelas daripada penanda modal anda.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Ketinggian dinamik

Jika ketinggian modal berubah semasa ia dibuka, anda harus memanggil myModal.handleUpdate()untuk melaraskan semula kedudukan modal sekiranya bar skrol muncul.

Kebolehcapaian

Pastikan anda menambah aria-labelledby="...", merujuk tajuk modal, kepada .modal. Selain itu, anda boleh memberikan penerangan tentang dialog modal anda dengan aria-describedbypada .modal. Ambil perhatian bahawa anda tidak perlu menambah role="dialog"kerana kami telah menambahkannya melalui JavaScript.

Membenamkan video YouTube

Membenamkan video YouTube dalam modals memerlukan JavaScript tambahan yang bukan dalam Bootstrap untuk menghentikan main balik secara automatik dan banyak lagi. Lihat siaran Stack Overflow yang berguna ini untuk mendapatkan maklumat lanjut.

Saiz pilihan

Modal mempunyai tiga saiz pilihan, tersedia melalui kelas pengubah suai untuk diletakkan pada .modal-dialog. Saiz ini bermula pada titik putus tertentu untuk mengelakkan bar skrol mendatar pada port pandangan yang lebih sempit.

Saiz Kelas Lebar maksimum modal
Kecil .modal-sm 300px
Lalai tiada 500px
besar .modal-lg 800px
Lebih besar .modal-xl 1140px

Modal lalai kami tanpa kelas pengubah suai membentuk modal saiz "sederhana".

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Modal skrin penuh

Satu lagi penggantian ialah pilihan untuk muncul modal yang meliputi port pandangan pengguna, tersedia melalui kelas pengubah suai yang diletakkan pada .modal-dialog.

Kelas Ketersediaan
.modal-fullscreen Sentiasa
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang sedang berkembang, modal kini menggunakan pembolehubah CSS tempatan pada .modaldan .modal-backdropuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Pembolehubah Sass

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

gelung

Mod skrin penuh responsif dijana melalui $breakpointspeta dan gelung dalam scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

Penggunaan

Pemalam modal menogol kandungan tersembunyi anda atas permintaan, melalui atribut data atau JavaScript. Ia juga mengatasi tingkah laku menatal lalai dan menjana .modal-backdropuntuk menyediakan kawasan klik untuk mengetepikan modal yang ditunjukkan apabila mengklik di luar modal.

Melalui atribut data

Togol

Aktifkan modal tanpa menulis JavaScript. Tetapkan data-bs-toggle="modal"pada elemen pengawal, seperti butang, bersama-sama dengan data-bs-target="#foo"atau href="#foo"untuk menyasarkan mod tertentu untuk menogol.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Tolak

Pemecatan boleh dicapai dengan dataatribut pada butang dalam modal seperti yang ditunjukkan di bawah:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

atau pada butang di luar modal menggunakan data-bs-targetseperti yang ditunjukkan di bawah:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Walaupun kedua-dua cara untuk mengetepikan modal disokong, perlu diingat bahawa mengetepikan dari luar modal tidak sepadan dengan pola dialog (modal) Panduan Amalan Pengarangan ARIA . Lakukan ini atas risiko anda sendiri.

Melalui JavaScript

Buat modal dengan satu baris JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Pilihan

Memandangkan pilihan boleh dihantar melalui atribut data atau JavaScript, anda boleh menambahkan nama pilihan pada data-bs-, seperti dalam data-bs-animation="{value}". Pastikan anda menukar jenis kes bagi nama pilihan daripada " camelCase " kepada " kebab-case " apabila menghantar pilihan melalui atribut data. Sebagai contoh, gunakan data-bs-custom-class="beautifier"bukannya data-bs-customClass="beautifier".

Mulai Bootstrap 5.2.0, semua komponen menyokong atribut data simpanan percubaandata-bs-config yang boleh menempatkan konfigurasi komponen ringkas sebagai rentetan JSON. Apabila elemen mempunyai data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang berasingan akan mengatasi nilai yang diberikan pada data-bs-config. Selain itu, atribut data sedia ada dapat menempatkan nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Nama taip Lalai Penerangan
backdrop boolean,'static' true Termasuk unsur tirai latar modal. Sebagai alternatif, tentukan statictirai latar yang tidak menutup modal apabila diklik.
focus boolean true Meletakkan fokus pada modal apabila dimulakan.
keyboard boolean true Menutup modal apabila kekunci escape ditekan.

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut .

Pilihan lulus

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Kaedah Penerangan
dispose Memusnahkan modal elemen. (Mengalih keluar data yang disimpan pada elemen DOM)
getInstance Kaedah statik yang membolehkan anda mendapatkan contoh modal yang dikaitkan dengan elemen DOM.
getOrCreateInstance Kaedah statik yang membolehkan anda mendapatkan contoh modal yang dikaitkan dengan elemen DOM, atau mencipta yang baharu sekiranya ia tidak dimulakan.
handleUpdate Laraskan semula kedudukan modal secara manual jika ketinggian mod berubah semasa ia dibuka (iaitu sekiranya bar skrol muncul).
hide Secara manual menyembunyikan modal. Kembali kepada pemanggil sebelum modal sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.modalperistiwa berlaku).
show Membuka modal secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.modalperistiwa berlaku). Selain itu, anda boleh menghantar elemen DOM sebagai hujah yang boleh diterima dalam acara modal (sebagai relatedTargetharta). (iaitu const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Togol mod secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.modalatau hidden.bs.modalperistiwa berlaku).

Peristiwa

Kelas modal Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi modal. Semua peristiwa modal dicetuskan pada modal itu sendiri (iaitu pada <div class="modal">).

Peristiwa Penerangan
hide.bs.modal Peristiwa ini dicetuskan serta-merta apabila hidekaedah contoh telah dipanggil.
hidden.bs.modal Acara ini dicetuskan apabila modal telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai).
hidePrevented.bs.modal Peristiwa ini dicetuskan apabila modal ditunjukkan, tirai latarnya adalah staticdan klik di luar modal dilakukan. Acara ini juga dicetuskan apabila kekunci melarikan diri ditekan dan keyboardpilihan ditetapkan kepada false.
show.bs.modal Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil. Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTargetharta acara.
shown.bs.modal Peristiwa ini dicetuskan apabila modal telah ditunjukkan kepada pengguna (akan menunggu peralihan CSS selesai). Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTargetharta acara. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})