Bài 8: Modal – Tạo hộp thoại trong Bootstrap – Chú thích Popover
Trong bài học này, chúng ta sẽ tìm hiểu về Modal – tạo hộp thoại trong Bootstrap. Ngoài ra, mình cũng sẽ giới thiệu thêm về cách tạo chú thích bằng Popover. Mình chỉ giới thiệu những thành phần cơ bản, còn những tùy chỉnh nâng cao, bạn có thể tham khảo thêm trên trang tài liệu tham khảo của Bootstrap.
Nội dung chính
Video – Modal – Tạo hộp thoại trong Bootstrap
Hướng dẫn chi tiết
"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
Hộp thoại Modal
Hộp thoại modal thường dùng để kiểm tra lại lệnh của người dùng vì mục đích an toàn. Ví dụ, người dùng đăng hoạt xóa 1 đ1ôi tượng, khi click vào một button sẽ hiện hộp thoại xác nhận lệnh.

Phần hộp thoại
+ Khối bao bên ngoài có class=”modal” và một id đặt tùy ý, nên đặt id liên quan đến nội dung hay công dụng của hộp thoại để dễ quản lý.
"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
+ Bên trong là một khối class=”modal-dialog”, bên trong nữa là một khối class=”modal-content”.
+ Phần content gồm 3 phần
modal-header: chứa tiêu đề của hộp thoại và mộ nút đóng hộp thoại.
<div class="modal-header"> <h4 class="modal-title">Xóa</h4> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> </div>
button có thuộc tính quan trọng nhất cần nhớ là data-dismiss=”modal” để đóng hộp thoại. Điểm này khá giống với Alert mà mình đã giới thiệu.
thẻ span để tạo dấu X theo định nghĩa sẵn của Bootstrap.
modal-body: chứa nội dung thông báo, hay câu hỏi.
<div class="modal-body"> Bạn có chắn chắc muốn xóa không? </div>
modal-footer: chứa các button xử lý.
<div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-success">OK</button> </div>
Phần button Delete gọi modal
<button class=”btn btn-danger” data-toggle=”modal” data-target=”#modalDelele”>Delete</button>
Điều cần nhớ về button gọi modal là 2 thuộc tính data-toggle=”modal” và data-target=”#id-của-modal”. Nhớ có dấu #
Chú thích Popover
Popover dùng để chú thích cho một button hay thẻ a nào đó. Khi click vào button, chú thích sẽ hiện ra.

Popover được xây dựng dựa trên thư viện của bên thứ ba là Popper JS nên cần thêm file popper.min.jsvào trước bootstrap.min.js. Các bạn có thể tải trong phần overview của doc bootstrap hoặc tải code demo bên dưới, trong đó mình đã thêm sẵn file popper.min.js.
Cách dùng:
+ Thêm popper.min.js
<script src="jquery-3.3.1.min.js"></script> <script src="popper.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>
+ Sử dụng
<button type="button" class="btn btn-outline-info" data-toggle="popover" data-container="body" data-placement="right" data-content="popover content" title="Popover title" data-trigger="focus">Popover</button>
Các thuộc tính
data-toggle=”popover”
data-container=”body”
data-placement=”right”: chú thích xuất hiện bên phải
title: tiêu đề của popover
data-content: nội dung chú thích
+ Thêm đoạn mã js vào bên dưới cùng, nằm dưới thẻ script bootstrap.min.js
<script type="text/javascript"> $(function () { $('[data-toggle="popover"]').popover() }) </script>
+ Muốn tắt chú thích thì nhấn vào button 1 lần nữa. Nếu muốn tắt chú thích theo dạng click vào bất kỳ chỗ nào, chúng ta thêm thuộc tính data-trigger=”focus” và thêm đoạn js sau
<script type="text/javascript"> $(function () { $('[data-toggle="popover"]').popover() }) $('.popover-dismiss').popover({ trigger: 'focus' }) </script>
Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.