in English

Modal

Gunakan plugin modal JavaScript Bootstrap untuk menambahkan dialog ke situs Anda untuk lightbox, pemberitahuan pengguna, atau konten yang sepenuhnya khusus.

Di halaman ini

Bagaimana itu bekerja

Sebelum memulai dengan komponen modal Bootstrap, pastikan untuk membaca yang berikut ini karena opsi menu kami baru saja berubah.

Modals dibangun dengan HTML, CSS, dan JavaScript. Mereka diposisikan di atas segala sesuatu yang lain dalam dokumen dan menghapus gulir dari <body>sehingga konten modal bergulir sebagai gantinya.
Mengklik pada "latar belakang" modal akan secara otomatis menutup modal.
Bootstrap hanya mendukung satu jendela modal pada satu waktu. Modal bersarang tidak didukung karena kami yakin itu adalah pengalaman pengguna yang buruk.
Modals use position: fixed, yang terkadang agak khusus tentang renderingnya. Bila memungkinkan, tempatkan modal HTML Anda di posisi teratas untuk menghindari potensi gangguan dari elemen lain. Anda mungkin akan mengalami masalah saat menyarangkan a .modaldi dalam elemen tetap lainnya.
Sekali lagi, karena position: fixed, ada beberapa peringatan dengan menggunakan modals di perangkat seluler. Lihat dokumen dukungan browser kami untuk detailnya.
Karena bagaimana HTML5 mendefinisikan semantiknya, atribut autofocusHTML tidak berpengaruh pada modals Bootstrap. Untuk mencapai efek yang sama, gunakan beberapa JavaScript khusus:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

Efek animasi komponen ini bergantung pada prefers-reduced-motionkueri media. Lihat bagian pengurangan gerakan pada dokumentasi aksesibilitas kami .

Teruslah membaca untuk demo dan panduan penggunaan.

Contoh

Di bawah ini adalah contoh modal statis (artinya positiondan displaytelah diganti). Termasuk adalah modal header, modal body (diperlukan untuk padding), dan modal footer (opsional). Kami meminta Anda menyertakan header modal dengan tindakan pemberhentian bila memungkinkan, atau memberikan tindakan pemberhentian eksplisit lainnya.

<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

Alihkan demo modal kerja dengan mengklik tombol di bawah ini. Ini akan meluncur ke bawah dan memudar dari bagian 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 statis

Ketika latar belakang diatur ke statis, modal tidak akan menutup saat mengklik di luarnya. Klik tombol di bawah untuk mencobanya.

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

Menggulir konten panjang

Ketika modals menjadi terlalu panjang untuk viewport atau perangkat pengguna, mereka menggulir terlepas dari halaman itu sendiri. Coba demo di bawah ini untuk melihat apa yang kami maksud.

Anda juga dapat membuat modal yang dapat digulir yang memungkinkan gulir badan modal dengan menambahkan .modal-dialog-scrollableke .modal-dialog.

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

Berpusat vertikal

Tambahkan .modal-dialog-centeredke .modal-dialoguntuk memusatkan modal secara vertikal.

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

Tooltip dan popover

Tooltips dan popovers dapat ditempatkan di dalam modals sesuai kebutuhan. Ketika modals ditutup, tooltips dan popovers apa pun di dalamnya juga secara otomatis diberhentikan.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" 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="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Menggunakan kisi-kisi

Manfaatkan sistem grid Bootstrap dalam modal dengan bersarang .container-fluiddi dalam file .modal-body. Kemudian, gunakan kelas sistem grid normal 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>

Punya banyak tombol yang semuanya memicu modal yang sama dengan konten yang sedikit berbeda? Gunakan event.relatedTargetdan atribut HTMLdata-bs-* untuk memvariasikan isi modal tergantung pada tombol mana yang diklik.

Di bawah ini adalah demo langsung diikuti dengan contoh HTML dan JavaScript. Untuk informasi lebih lanjut, baca dokumen acara modal untuk detail tentang relatedTarget.

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

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var 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.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Beralih antar modal

Beralih di antara beberapa modal dengan beberapa penempatan atribut data-bs-targetand yang cerdas. data-bs-toggleMisalnya, Anda dapat mengaktifkan modal penyetelan ulang kata sandi dari dalam modal masuk yang sudah terbuka. Harap perhatikan beberapa modal tidak dapat dibuka pada saat yang sama — metode ini hanya beralih di antara dua modal yang terpisah.

Buka modal pertama

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

Ubah animasi

Variabel $modal-fade-transformmenentukan status transformasi .modal-dialogsebelum animasi mode fade-in, $modal-show-transformvariabel menentukan transformasi .modal-dialogdi akhir animasi mode fade-in.

Jika Anda ingin misalnya animasi zoom-in, Anda dapat mengatur $modal-fade-transform: scale(.8).

Hapus animasi

Untuk modals yang hanya muncul daripada menghilang untuk dilihat, hapus .fadekelas dari markup modal Anda.

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

Ketinggian dinamis

Jika ketinggian modal berubah saat terbuka, Anda harus memanggil myModal.handleUpdate()untuk menyesuaikan kembali posisi modal jika bilah gulir muncul.

Aksesibilitas

Pastikan untuk menambahkan aria-labelledby="...", dengan merujuk judul modal, ke .modal. Selain itu, Anda dapat memberikan deskripsi dialog modal Anda dengan aria-describedbyon .modal. Perhatikan bahwa Anda tidak perlu menambahkan role="dialog"karena kami sudah menambahkannya melalui JavaScript.

Menyematkan video YouTube

Menyematkan video YouTube dalam modals memerlukan JavaScript tambahan yang tidak ada di Bootstrap untuk secara otomatis menghentikan pemutaran dan banyak lagi. Lihat posting Stack Overflow yang bermanfaat ini untuk informasi lebih lanjut.

Ukuran opsional

Modals memiliki tiga ukuran opsional, tersedia melalui kelas pengubah untuk ditempatkan pada file .modal-dialog. Ukuran ini masuk pada breakpoint tertentu untuk menghindari scrollbar horizontal pada viewport yang lebih sempit.

Ukuran	Kelas	Modal max-lebar
Kecil	`.modal-sm`	`300px`
Bawaan	Tidak ada	`500px`
Besar	`.modal-lg`	`800px`
Ekstra besar	`.modal-xl`	`1140px`

Modal default kami tanpa kelas pengubah merupakan modal ukuran "sedang".

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

Penggantian lain adalah opsi untuk memunculkan modal yang mencakup area pandang pengguna, tersedia melalui kelas pengubah yang ditempatkan pada file .modal-dialog.

Kelas	Ketersediaan
`.modal-fullscreen`	Selalu
`.modal-fullscreen-sm-down`	Di bawah`576px`
`.modal-fullscreen-md-down`	Di bawah`768px`
`.modal-fullscreen-lg-down`	Di bawah`992px`
`.modal-fullscreen-xl-down`	Di bawah`1200px`
`.modal-fullscreen-xxl-down`	Di bawah`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Kelancangan

Variabel

$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:        rgba($black, .2);
$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:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-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-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);

Lingkaran

Modals layar penuh responsif dihasilkan melalui $breakpointspeta dan loop di 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 {
        @include border-radius(0);
      }

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

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

Penggunaan

Plugin modal mengaktifkan konten tersembunyi Anda sesuai permintaan, melalui atribut data atau JavaScript. Itu juga mengesampingkan perilaku pengguliran default dan menghasilkan a .modal-backdropuntuk menyediakan area klik untuk mengabaikan modal yang ditampilkan saat mengklik di luar modal.

Melalui atribut data

Beralih

Aktifkan modal tanpa menulis JavaScript. Setel data-bs-toggle="modal"pada elemen pengontrol, seperti tombol, bersama dengan a data-bs-target="#foo"atau href="#foo"untuk menargetkan modal tertentu untuk beralih.

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

Membubarkan

Pemberhentian dapat dicapai dengan dataatribut pada tombol di dalam modal seperti yang ditunjukkan di bawah ini:

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

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

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

Meskipun kedua cara untuk mengabaikan modal didukung, perlu diingat bahwa menutup dari luar modal tidak cocok dengan pola desain dialog modal WAI-ARIA . Lakukan dengan resiko ditanggung sendiri.

Melalui JavaScript

Buat modal dengan satu baris JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-bs-, seperti pada data-bs-backdrop="".

Nama	Jenis	Bawaan	Keterangan
`backdrop`	boolean atau string`'static'`	`true`	Termasuk elemen modal-backdrop. Atau, tentukan `static`untuk tampilan latar yang tidak menutup modal saat diklik.
`keyboard`	boolean	`true`	Menutup modal saat tombol escape ditekan
`focus`	boolean	`true`	Menempatkan fokus pada modal saat diinisialisasi.

Metode

Metode dan transisi asinkron

Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .

Opsi passing

Mengaktifkan konten Anda sebagai modal. Menerima opsi opsional object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

beralih

Mengalihkan modal secara manual. Kembali ke pemanggil sebelum modal benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.modalatau hidden.bs.modalperistiwa terjadi).

myModal.toggle()

menunjukkan

Secara manual membuka modal. Kembali ke pemanggil sebelum modal benar-benar ditampilkan (yaitu sebelum shown.bs.modalperistiwa terjadi).

myModal.show()

Selain itu, Anda dapat meneruskan elemen DOM sebagai argumen yang dapat diterima di peristiwa modal (sebagai relatedTargetproperti).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

bersembunyi

Secara manual menyembunyikan modal. Kembali ke pemanggil sebelum modal benar-benar disembunyikan (yaitu sebelum hidden.bs.modalperistiwa terjadi).

myModal.hide()

menangani Pembaruan

Sesuaikan kembali posisi modal secara manual jika ketinggian modal berubah saat modal dibuka (yaitu jika bilah gulir muncul).

myModal.handleUpdate()

membuang

Menghancurkan modal elemen. (Menghapus data yang tersimpan pada elemen DOM)

myModal.dispose()

dapatkan Instance

Metode statis yang memungkinkan Anda mendapatkan instance modal yang terkait dengan elemen DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Metode statis yang memungkinkan Anda mendapatkan instance modal yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

Acara

Kelas modal Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsionalitas modal. Semua peristiwa modal dipecat pada modal itu sendiri (yaitu di <div class="modal">).

Jenis acara	Keterangan
`show.bs.modal`	Acara ini langsung aktif ketika `show`metode instance dipanggil. Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai `relatedTarget`properti acara.
`shown.bs.modal`	Acara ini dipicu ketika modal telah dibuat terlihat oleh pengguna (akan menunggu transisi CSS selesai). Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai `relatedTarget`properti acara.
`hide.bs.modal`	Acara ini dipecat segera ketika `hide`metode instance telah dipanggil.
`hidden.bs.modal`	Acara ini dipicu ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai).
`hidePrevented.bs.modal`	Peristiwa ini dipicu ketika modal ditampilkan, latar belakangnya `static`dan klik di luar modal atau penekanan tombol escape dilakukan dengan opsi keyboard atau `data-bs-keyboard`disetel ke `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})