Phương thức Bootstrap 4
Phương thức Bootstrap 4
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-toggle="modal" data-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="close" data-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-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ỏ, lớp .modal-lg
cho các phương thức lớn hoặc .modal-xl
cho các phương thức cực lớn.
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".
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
:
Tham khảo phương thức Bootstrap hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện phương thức, hãy truy cập Tài liệu tham khảo phương thức Bootstrap JS của chúng tôi.