✅Sử dụng modal trong bootstrap 5.1x
Modal Box trong Bootstrap là một hộp thoại pop-up dùng để hiển thị thông tin, form, cảnh báo... mà không chuyển trang.
Dưới đây là hướng dẫn sử dụng, các kích thước và phân loại modal trong Bootstrap (phiên bản 5.1x) hoặc Adminlte v4
✅ CÁCH SỬ DỤNG MODAL TRONG BOOTSTRAP
1. Cấu trúc cơ bản của modal
📏 KÍCH THƯỚC MODAL
Bootstrap hỗ trợ nhiều kích thước modal bằng cách thêm class vào .modal-dialog:
| Class thêm | Kích thước | Mô tả |
|---|---|---|
.modal-sm |
Nhỏ | Phù hợp cho cảnh báo ngắn |
| (mặc định) | Trung bình | Không thêm class |
.modal-lg |
Lớn | Cho nội dung dài hơn |
.modal-xl |
Rất lớn | Khi cần hiển thị nội dung rộng |
.modal-fullscreen |
Toàn màn hình | Đầy màn hình, lý tưởng cho thiết bị di động(adminlte v3 hoặc Bootstrap 4 k có) |
📌 Ví dụ dùng .modal-lg
.modal-fullscreen-custom {
width: 100vw;
height: 100vh;
margin: 0;
max-width: 100%;
}
🧩 PHÂN LOẠI THEO MỤC ĐÍCH
| Loại modal | Mục đích sử dụng | Đặc điểm |
|---|---|---|
| 📝 Form modal | Nhập liệu, đăng ký, đăng nhập | Chứa <form> trong body |
| ⚠️ Alert/Warning modal | Cảnh báo, xác nhận xóa | Màu sắc đỏ/cam, thường có nút Yes/No |
| 📄 Content modal | Hiển thị nội dung, chi tiết bản ghi | Load nội dung động hoặc tĩnh |
| 📊 Large data modal | Bảng dữ liệu, form dài | Dùng modal-lg hoặc modal-xl |
| 📱 Fullscreen modal | Dành cho mobile, chi tiết sản phẩm | Dùng modal-fullscreen |
🔄 KÍCH HOẠT MODAL QUA JAVASCRIPT
//đoạn code này phải đặt dưới cùng sau bootstrap bundle
var myModal = new bootstrap.Modal(document.getElementById('modalExample'))
myModal.show()
🎨 TUỲ CHỈNH GIAO DIỆN MODAL
Bạn có thể thêm các class Bootstrap vào nội dung bên trong modal như:
-
text-center,text-danger,bg-light,p-3,rounded, v.v. -
Hoặc custom CSS riêng nếu cần tinh chỉnh thêm.
🎨 [ Made by AI ] // Bootstrap-crafted modal with logic & style 🧠✨
Khi dùng modal (dù trong Bootstrap hay AdminLTE), việc thêm thuộc tính role giúp tăng tính truy cập (accessibility) – tức là hỗ trợ tốt hơn cho người dùng dùng trình đọc màn hình (screen reader) hoặc các công cụ hỗ trợ khác.
✅ Ý nghĩa của role trong modal
Thuộc tính role |
Ý nghĩa | Có nên dùng? |
|---|---|---|
role="dialog" |
Báo cho screen reader rằng đây là hộp thoại | ✅ Nên dùng |
role="document" |
Báo nội dung là một tài liệu chính (ít dùng) | ❌ Thường không dùng |
role="alertdialog" |
Dùng cho modal cảnh báo cần phản hồi gấp | ✅ Dùng khi cần xác nhận/xóa v.v. |
🔍 Ví dụ dùng đúng:
1. Modal thông thường:
<div class="modal fade" id="modalExample" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> ... </div> </div></div>
2. Modal xác nhận xóa, cần sự chú ý đặc biệt:
<div class="modal fade" id="modalDelete" tabindex="-1" role="alertdialog" aria-modal="true" aria-labelledby="deleteTitle"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 id="deleteTitle">Xác nhận xóa</h5> </div> ... </div> </div></div>
💡 Ghi chú quan trọng
-
role="dialog"nên đi kèm với:aria-labelledby="id_of_title"aria-describedby="id_of_body"(nếu có phần nội dung mô tả chính)
aria-modal="true" giúp screen reader hiểu đây là lớp nền chặn tương tác nền
🧠 Tổng kết – Cách chuẩn cho modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalBody"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 id="modalTitle">Tiêu đề modal</h5> </div> <div class="modal-body" id="modalBody"> Nội dung modal ở đây. </div> </div> </div></div>
Hệ thống phức tạp (như dashboard hoặc SPA), việc dùng role và aria đầy đủ sẽ giúp tăng điểm Lighthouse (SEO, accessibility) và chuẩn WCAG hơn.
🤖 Made by AI – Semantic code, accessible modals, future-proof UI 🌐✨
tabindex là 01 thuộc tính rất quan trọng khi dùng trong modal, giúp quản lý thứ tự focus khi người dùng nhấn phím Tab, và đặc biệt quan trọng để đảm bảo trải nghiệm truy cập tốt cho người dùng dùng bàn phím hoặc trình đọc màn hình.
🎯 tabindex là gì?
Thuộc tính tabindex điều khiển thứ tự focus khi nhấn Tab trong HTML.
| Giá trị | Ý nghĩa |
|---|---|
| tabindex="0" | Cho phép focus qua Tab, theo thứ tự dòng xuất hiện |
| tabindex="-1" | Không focus qua Tab, nhưng vẫn có thể focus qua JavaScript (.focus()) |
| tabindex="1"...n | Focus theo thứ tự số tăng dần (ít dùng, vì khó quản lý) |
✅ tabindex trong modal dùng như thế nào?
1. tabindex="-1" trên thẻ modal chính (.modal):
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
📌 Ý nghĩa:
-
Giúp modal có thể được focus bằng JavaScript (ví dụ khi mở modal thì
.focus()vào modal) -
Không được focus khi nhấn
Tab, tránh gây rối vòng tab
2. Focus đầu tiên trong modal khi mở
Khi modal mở, Bootstrap (hoặc AdminLTE) thường tự động focus vào phần tử đầu tiên có thể tương tác (ví dụ input, button), nhưng nếu muốn rõ ràng:
<input type="text" class="form-control" id="modalInput" autofocus>Hoặc:
<button class="btn btn-primary" tabindex="0">OK</button>💡 Pro Tip: Giữ focus trong modal (Focus Trap)
Khi modal mở, focus nên bị “giữ” trong modal, không cho tab ra ngoài nền.
Bootstrap đã làm sẵn việc này, nhưng nếu tự custom modal thì nên dùng thư viện như:
-
focus-trap -
hoặc tự viết logic JS để xử lý tab từ phần tử cuối → quay lại đầu
📌 Tổng kết: Modal chuẩn với tabindex
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="modalTitle"> <div class="modal-dialog" role="document"> <div class="modal-content">
<div class="modal-header"> <h5 id="modalTitle">Tiêu đề Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="0"> <span aria-hidden="true">×</span> </button> </div>
<div class="modal-body"> <input type="text" class="form-control" placeholder="Nhập gì đó..." autofocus tabindex="0"> </div>
<div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal" tabindex="0">Đóng</button> <button class="btn btn-primary" tabindex="0">Lưu</button> </div>
</div> </div></div>
Nếu cần thêm hỗ trợ về quản lý focus nâng cao (ví dụ trap focus hay xử lý Esc, Enter trong modal), mình có thể viết đoạn JS tối ưu ngay!
💻⚡ [ Made by AI ] – Từng dòng code focus chuẩn chỉnh cho trải nghiệm hoàn hảo 🎯
Nhận xét
Đăng nhận xét