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:

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

myModal.addEventListener('shown.bs.modal', function () {
  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.

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

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.

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

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

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

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

Sass

Pembolehubah

$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);

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 {
        @include border-radius(0);
      }

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

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

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 corak reka bentuk dialog modal WAI-ARIA . Lakukan ini atas risiko anda sendiri.

Melalui JavaScript

Buat modal dengan satu baris JavaScript:

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

Pilihan

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

Nama	taip	Lalai	Penerangan
`backdrop`	boolean atau rentetan`'static'`	`true`	Termasuk unsur tirai latar modal. Sebagai alternatif, tentukan `static`tirai latar yang tidak menutup modal pada klik.
`keyboard`	boolean	`true`	Menutup modal apabila kekunci escape ditekan
`focus`	boolean	`true`	Meletakkan fokus pada 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 .

Pilihan lulus

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

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

togol

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

myModal.toggle()

tunjuk

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

myModal.show()

Selain itu, anda boleh menghantar elemen DOM sebagai hujah yang boleh diterima dalam acara modal (sebagai relatedTargetharta).

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

bersembunyi

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

myModal.hide()

handleUpdate

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

myModal.handleUpdate()

buang

Memusnahkan modal elemen. (Mengalih keluar data yang disimpan pada elemen DOM)

myModal.dispose()

getInstance

Kaedah statik yang membolehkan anda mendapatkan contoh modal yang dikaitkan dengan elemen DOM

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

getOrCreateInstance

Kaedah statik yang membolehkan anda mendapatkan contoh modal yang dikaitkan dengan elemen DOM, atau mencipta yang baharu sekiranya ia tidak dimulakan

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

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 `show`kaedah contoh dipanggil. Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai `relatedTarget`harta 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 `relatedTarget`harta acara.
`hide.bs.modal`	Peristiwa ini dicetuskan serta-merta apabila `hide`kaedah 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 `static`dan klik di luar modal atau penekan kekunci escape dilakukan dengan pilihan papan kekunci atau `data-bs-keyboard`ditetapkan kepada `false`.

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