Source

Modal

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

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:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

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.

<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-secondary" data-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-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>

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.

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

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

<!-- 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="exampleModalCenterTitle">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>

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

Mempelbagaikan kandungan modal

Mempunyai sekumpulan butang yang semuanya mencetuskan modal yang sama dengan kandungan yang sedikit berbeza? Gunakan event.relatedTargetdan atribut HTMLdata-* (mungkin melalui jQuery ) untuk mengubah kandungan modal bergantung pada butang yang diklik.

Di bawah ialah demo langsung diikuti dengan contoh HTML dan JavaScript. Untuk mendapatkan maklumat lanjut, baca dokumen acara modal untuk butiran 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)
})

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" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Ketinggian dinamik

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

Kebolehcapaian

Pastikan anda menambah role="dialog"dan aria-labelledby="...", merujuk tajuk modal, kepada .modal, dan role="document"kepada .modal-dialogdirinya sendiri. Selain itu, anda boleh memberikan penerangan tentang dialog modal anda dengan aria-describedbypada .modal.

Membenamkan video YouTube

Membenamkan video YouTube dalam modal memerlukan JavaScript tambahan yang tiada 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 dua 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.

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

Pemalam modal menogol kandungan tersembunyi anda atas permintaan, melalui atribut data atau JavaScript. Ia juga menambah .modal-openkepada <body>untuk 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

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

<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

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-backdrop="".

Nama taip Lalai Penerangan
latar belakang boolean atau rentetan'static' benar Termasuk unsur tirai latar modal. Sebagai alternatif, tentukan statictirai latar yang tidak menutup modal pada klik.
papan kekunci boolean benar Menutup modal apabila kekunci escape ditekan
fokus boolean benar Meletakkan fokus pada modal apabila dimulakan.
tunjuk boolean benar Menunjukkan modal apabila dimulakan.

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.

.modal(options)

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

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

.modal('toggle')

Togol mod secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.modalatau hidden.bs.modalperistiwa berlaku).

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

.modal('show')

Membuka modal secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.modalperistiwa berlaku).

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

.modal('hide')

Secara manual menyembunyikan modal. Kembali kepada pemanggil sebelum modal sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.modalperistiwa berlaku).

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

.modal('handleUpdate')

Laraskan semula kedudukan modal secara manual jika ketinggian mod berubah semasa ia dibuka (iaitu sekiranya bar skrol muncul).

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

.modal('dispose')

Memusnahkan modal elemen.

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">).

Jenis acara Penerangan
show.bs.modal Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil. Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTargetharta acara.
ditunjukkan.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.
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). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})