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.modal
dalam 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
autofocus
HTML 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()
})
prefers-reduced-motion
pertanyaan media. Lihat bahagian
gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .
Teruskan membaca untuk tunjuk cara dan garis panduan penggunaan.
Contoh
Komponen modal
Di bawah ialah contoh modal statikposition
(bermaksud dan display
telah 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-scrollable
pada .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Berpusat secara menegak
Tambahkan .modal-dialog-centered
ke .modal-dialog
ke 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-fluid
dalam .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>
Mempelbagaikan kandungan modal
Mempunyai sekumpulan butang yang semuanya mencetuskan modal yang sama dengan kandungan yang sedikit berbeza? Gunakan event.relatedTarget
dan 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-target
dan . data-bs-toggle
Sebagai 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.
<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-transform
menentukan keadaan transformasi .modal-dialog
sebelum animasi fade-in modal, $modal-show-transform
pembolehubah menentukan perubahan .modal-dialog
pada 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 .fade
kelas 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-describedby
pada .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>
Modal skrin penuh
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 bawah576px |
.modal-fullscreen-md-down |
Di bawah768px |
.modal-fullscreen-lg-down |
Di bawah992px |
.modal-fullscreen-xl-down |
Di bawah1200px |
.modal-fullscreen-xxl-down |
Di bawah1400px |
<!-- 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 $breakpoints
peta 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-backdrop
untuk 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 data
atribut 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-target
seperti yang ditunjukkan di bawah:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
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.modal
atau hidden.bs.modal
peristiwa berlaku).
myModal.toggle()
tunjuk
Membuka modal secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.modal
peristiwa berlaku).
myModal.show()
Selain itu, anda boleh menghantar elemen DOM sebagai hujah yang boleh diterima dalam acara modal (sebagai relatedTarget
harta).
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.modal
peristiwa 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...
})