Source

Modal

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

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')
})

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" role="dialog">
  <div class="modal-dialog" role="document">
    <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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>

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.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

Berpusat vertikal

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

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

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>

Memvariasikan konten modal

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 acara 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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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)
})

Hapus animasi

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

<div class="modal" tabindex="-1" role="dialog" 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 role="dialog"dan aria-labelledby="...", dengan merujuk judul modal, ke .modal, dan role="document"ke .modal-dialogdirinya sendiri. Selain itu, Anda dapat memberikan deskripsi dialog modal Anda dengan aria-describedbyon .modal.

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

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</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 staticuntuk 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 showmetode instance dipanggil. Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTargetproperti acara.
ditampilkan.bs.modal Acara ini diaktifkan ketika modal telah dibuat terlihat oleh pengguna (akan menunggu transisi CSS selesai). Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTargetproperti acara.
hide.bs.modal Acara ini dipecat segera ketika hidemetode instance telah dipanggil.
hidden.bs.modal Acara ini dipicu ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})