Bootstrap 4 Phương thức
Bootstrap 4 Phương thức
Thành phần Phương thức là một hộp thoại / cửa sổ bật lên được hiển thị trên đầ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:
Thí 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>
Thêm hoạt ảnh
Sử dụng .fadelớp để thêm hiệu ứng mờ dần khi mở và đóng phương thức:
Thí dụ
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
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 .modal-sm
lớp cho phương thức nhỏ, .modal-lglớp cho phương thức lớn hoặc .modal-xlcho phương thức cực lớn.
Thêm lớp kích thước vào <div>phần tử có lớp .modal-dialog:
Phương thức nhỏ
<div class="modal-dialog modal-sm">
Phương thức lớn
<div class="modal-dialog modal-lg">
Phương thức cực lớn
<div class="modal-dialog modal-xl">
Theo mặc định, các phương thức có kích thước "trung bình".
Phương thức căn giữa
Căn giữa phương thức theo chiều dọc và chiều ngang trong trang, với .modal-dialog-centered
lớp:
Thí dụ
<div class="modal-dialog 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, một thanh cuộn sẽ được thêm vào trang. Xem các ví dụ dưới đây để hiểu nó:
Thí dụ
<div class="modal-dialog">
Tuy nhiên, có thể chỉ cuộn bên trong phương thức, thay vì chính trang đó, bằng cách thêm .modal-dialog-scrollablevào .modal-dialog:
Thí dụ
<div class="modal-dialog modal-dialog-scrollable">
Tham khảo đầy đủ phương thức Bootstrap
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn phương thức, phương thức và sự kiện, hãy truy cập Tham khảo phương thức Bootstrap JS của chúng tôi .