Modal (hay còn gọi là popup) là một thành phần giao diện người dùng phổ biến trong Bootstrap, giúp hiển thị nội dung trên một lớp phủ phía trên trang hiện tại. Dưới đây là cách tích hợp và tùy chỉnh Modal một cách hiệu quả.
Cấu trúc cơ bản của Modal
Một Modal tiêu chuẩn bao gồm các lớp wrapper, dialog và content. Đoạn mã dưới đây minh họa một Modal dùng để hiển thị chi tiết đơn hàng:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#orderDetailModal">
Xem chi tiết đơn hàng
</button>
<div class="modal fade" id="orderDetailModal" tabindex="-1" role="dialog" aria-labelledby="orderDetailLabel" aria-describedby="orderDetailDesc">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Đóng">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="orderDetailLabel">Thông tin đơn hàng</h4>
</div>
<div class="modal-body">
<p id="orderDetailDesc">Đây là nơi hiển thị các thông tin chi tiết về đơn hàng của bạn.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
<button type="button" class="btn btn-primary">Lưu thay đổi</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>Các thuộc tính ARIA và Khả năng tiếp cận
Để đảm bảo Modal thân thiện với các thiết bị hỗ trợ đọc màn hình, bạn cần chú ý các thuộc tính sau:
- Thêm
role="dialog"vào phần tử.modalđể xác định đây là một hộp thoại. - Sử dụng
aria-labelledbyđể tham chiếu đến tiêu đề của Modal. - Sử dụng
aria-describedbyđể cung cấp mô tả chi tiết cho nội dung bên trong Modal.
Tắt hiệu ứng chuyển động (Animation)
Mặc định, Modal sẽ có hiệu ứng mờ dần (fade in/out) khi mở và đóng. Nếu bạn muốn loại bỏ hiệu ứng này để Modal xuất hiện ngay lập tức, chỉ cần xóa lớp .fade ra khỏi phần tử .modal.
Điều khiển Modal bằng JavaScript
Ngoài việc sử dụng thuộc tính data-toggle="modal" trên các phần tử HTML, bạn có thể điều khiển Modal hoàn toàn bằng jQuery/JavaScript. Các phương thức cơ bản bao gồm:
// Hiển thị hoặc ẩn Modal (chuyển đổi trạng thái)
$('#orderDetailModal').modal('toggle');
// Mở Modal
$('#orderDetailModal').modal('show');
// Đóng Modal
$('#orderDetailModal').modal('hide');
// Cập nhật lại vị trí Modal (thường dùng khi nội dung bên trong thay đổi độ cao động)
$('#orderDetailModal').modal('handleUpdate');
Ví dụ thực tế: Kích hoạt Modal khi nhấn vào một nút danh sách và ngăn chặn sự kiện lan truyền.
function openOrderModal(orderId) {
// Tải dữ liệu đơn hàng ở đây...
$('#orderDetailModal').modal('show');
event.stopPropagation();
}
Các sự kiện (Events) của Modal
Bootstrap cung cấp các sự kiện hook cho phép bạn thực thi mã lệnh tại các thời điểm cụ thể trong vòng đời của Modal.
| Sự kiện | Mô tả | Ví dụ sử dụng |
|---|---|---|
show.bs.modal |
Được kích hoạt ngay khi phương thức show được gọi. |
|
shown.bs.modal |
Được kích hoạt khi Modal đã hiển thị hoàn toàn (sau khi hiệu ứng CSS kết thúc). | |
hide.bs.modal |
Được kích hoạt ngay khi phương thức hide được gọi. |
|
hidden.bs.modal |
Được kích hoạt khi Modal đã ẩn hoàn toàn khỏi người dùng. | |