Phương thức Bootstrap 5
Phương thức
Thành phần Modal là một hộp thoại/cửa sổ bật lên được hiển thị ở đầu trang hiện tại:
Cách tạo một phương thức
Ví dụ sau đây cho thấy cách tạo một phương thức cơ bản:
Ví dụ
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Hãy tự mình thử »Thêm hoạt ảnh
Sử dụng lớp .fade để thêm hiệu ứng mờ dần khi mở và đóng modal:
Ví dụ
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Hãy tự mình thử » Kích thước phương thức
Thay đổi kích thước của phương thức bằng cách thêm lớp .modal-sm cho các phương thức nhỏ (độ rộng tối đa 300px), lớp .modal-lg cho các phương thức lớn (độ rộng tối đa 800px) hoặc .modal-xl cho các phương thức cực lớn (tối đa -chiều rộng 1140px). Mặc định là chiều rộng tối đa 500px.
Thêm lớp kích thước vào phần tử <div> bằng lớp .modal-dialog :
Theo mặc định, các phương thức có kích thước "trung bình" (chiều rộng tối đa 500px).
Chế độ toàn màn hình
Nếu bạn muốn phương thức trải rộng toàn bộ chiều rộng và chiều cao của trang, hãy sử dụng lớp .modal-fullscreen :
Phương thức toàn màn hình đáp ứng
Bạn cũng có thể kiểm soát thời điểm chế độ ở chế độ toàn màn hình, với các lớp .modal-fullscreen-*-* :
| Class | Description | Example |
|---|---|---|
.modal-fullscreen-sm-down |
Fullscreen below 576px | Try it |
.modal-fullscreen-md-down |
Fullscreen below 768px | Try it |
.modal-fullscreen-lg-down |
Fullscreen below 992px | Try it |
.modal-fullscreen-xl-down |
Fullscreen below 1200px | Try it |
.modal-fullscreen-xxl-down |
Fullscreen below 1400px | Try it |
Phương thức tập trung
Căn giữa phương thức theo chiều dọc và chiều ngang trong trang, với lớp .modal-dialog-centered :
Phương thức cuộn
Khi bạn có nhiều nội dung bên trong phương thức, thanh cuộn sẽ được thêm vào trang. Xem các ví dụ dưới đây để hiểu nó:
Tuy nhiên, chỉ có thể cuộn bên trong phương thức, thay vì chính trang đó, bằng cách thêm .modal-dialog-scrollable vào .modal-dialog :
