in English

Modal

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

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:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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 tajuk modal dengan tindakan pemberhentian bila memungkinkan, atau berikan 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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-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="close" data-dismiss="modal" 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" data-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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" 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" data-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.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

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

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

<!-- 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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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-* (mungkin melalui jQuery ) untuk memvariasikan konten 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 peristiwa modal untuk detail tentang relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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').modal('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>

Penggunaan

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

Melalui atribut data

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

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

Melalui JavaScript

Panggil modal dengan id myModaldengan satu baris JavaScript:

$('#myModal').modal(options)

Pilihan

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

Nama	Jenis	Bawaan	Keterangan
latar belakang	boolean atau string`'static'`	BENAR	Termasuk elemen modal-backdrop. Atau, tentukan `static`untuk tampilan latar yang tidak menutup modal saat diklik.
papan ketik	boolean	BENAR	Menutup modal saat tombol escape ditekan
fokus	boolean	BENAR	Menempatkan fokus pada modal saat diinisialisasi.
menunjukkan	boolean	BENAR	Menampilkan 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 .

`.modal(options)`

Mengaktifkan konten Anda sebagai modal. Menerima opsi opsional object.

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

`.modal('toggle')`

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

$('#myModal').modal('toggle')

`.modal('show')`

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

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

`.modal('hide')`

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

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

`.modal('handleUpdate')`

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

$('#myModal').modal('handleUpdate')

`.modal('dispose')`

Menghancurkan modal elemen.

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.
ditampilkan.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-keyboard`disetel ke `false`.

$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})