Plugin phương thức Bootstrap
Plugin phương thức
Plugin 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:
Mẹo: Các plugin có thể được đưa vào riêng lẻ (sử dụng tệp "modal.js" riêng lẻ của Bootstrap) hoặc tất cả cùng một lúc (sử dụng "bootstrap.js" hoặc "bootstrap.min.js").
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ụ
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Hãy tự mình thử »Ví dụ giải thích
Phần "Kích hoạt":
Để kích hoạt cửa sổ phương thức, bạn cần sử dụng một nút hoặc một liên kết.
Sau đó bao gồm hai thuộc tính data-*:
-
data-toggle="modal"mở cửa sổ phương thức -
data-target="#myModal"trỏ đến id của phương thức
Phần "Phương thức":
<div> cha của phương thức phải có ID giống với giá trị của thuộc tính data-target được sử dụng để kích hoạt phương thức ("myModal").
Lớp .modal xác định nội dung của <div> là một phương thức và tập trung vào nó.
Lớp .fade thêm hiệu ứng chuyển tiếp làm mờ dần phương thức. Loại bỏ lớp này nếu bạn không muốn hiệu ứng này.
Thuộc tính role="dialog" cải thiện khả năng truy cập cho những người sử dụng trình đọc màn hình.
Lớp .modal-dialog đặt chiều rộng và lề thích hợp của phương thức.
Phần "Nội dung phương thức":
<div> với class="modal-content " tạo kiểu cho phương thức (đường viền, màu nền, v.v.). Bên trong <div> này, hãy thêm tiêu đề, nội dung và chân trang của phương thức.
Lớp .modal-header được sử dụng để xác định kiểu cho tiêu đề của modal. <button> bên trong tiêu đề có thuộc tính data-dismiss="modal" sẽ đóng phương thức nếu bạn nhấp vào nó. Lớp .close tạo kiểu cho nút đóng và lớp .modal-title tạo kiểu cho tiêu đề với chiều cao dòng thích hợp.
Lớp .modal-body được sử dụng để xác định kiểu dáng cho phần thân của modal. Thêm bất kỳ đánh dấu HTML nào vào đây; đoạn văn, hình ảnh, video, v.v.
Lớp .modal-footer được sử dụng để xác định kiểu cho phần chân trang của modal. Lưu ý rằng khu vực này được căn phải theo mặc định.
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ỏ hoặc lớp .modal-lg cho các phương thứ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.
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.
