Trong quá trình phát triển web, chúng ta thường gặp những tình huống đặc biệt, nơi mà việc xử lý thông tin hay tương tác với người dùng đòi hỏi sự linh hoạt và thuận tiện. Modal trong Bootstrap 5 là một công cụ mạnh mẽ, giúp bạn giải quyết những thách thức này một cách hiệu quả. Nếu bạn vẫn chưa biết cách sử dụng Bootstrap thì hay tìm hiểu ngay tại đây.
Hãy tưởng tượng bạn muốn xác nhận một hành động quan trọng mà không muốn chuyển đến trang mới. Modal làm cho nhiệm vụ này trở nên dễ dàng, tạo ra một cửa sổ popup mượt mà trên trang hiện tại. Dưới đây là cách tạo hộp thoại hay popup bằng Bootstrap 5.
1. Cách tạo Modal trong Bootstrap 5
Đoạn code sau sẽ giúp bạn tạo một Modal cơ bản:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Mở popup
</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="btn-close" data-bs-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-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Mẫu modal bằng Bootstrap 5</h3>
<p>Click vào nút bấm để mở modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Mở popup
</button>
</div>
<!-- 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="btn-close" data-bs-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-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>>>> Xem thêm các bài viết về Bootstrap 5 tại đây:
Tất tần tật về Container trong Bootstrap 5
Làm cách nào để tạo Jumbotron trong Bootstrap 5
2. Thêm hiệu ứng cho Modal trong Bootstrap 5
Bootstrap 5 cung cấp cho bạn một option .fade trong Modal để có thể tạo hiệu ứng mờ dần khi bạn đóng mở Modal.
Code mẫu:
<!-- The Modal -->
<div class="modal fade’" id="myModal">
<!-- Modal Header -->
...
</div>3. Static backdrop của Modal trong Bootstrap 5
Static backdrop trong Bootstrap Modal là một tính năng cho phép bạn kiểm soát cách backdrop (phần nền xung quanh Modal) phản ứng khi modal đang hiển thị. Khi thiết lập static backdrop, backdrop sẽ không đóng cửa sổ modal khi người dùng nhấp vào nó. Điều này có nghĩa là modal sẽ không tự đóng khi người dùng nhấp vào bất kỳ vùng nào bên ngoài nó trên backdrop. Để làm được điều này bạn chỉ cần thêm data-bs-backdrop="static" vào đoạn code của bạn.
Code mẫu:
<div class="modal" id="staticBackdrop" tabindex="-1" aria-labelledby="staticBackdrop" aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<!-- Nội dung Modal ở đây -->
</div>
</div>
</div>4. Kích thước Modal trong Bootstrap 5
Để có thể thay đổi kích thước modal bạn có thể sử dụng cách thêm class .modal-sm cho các modal nhỏ (độ rộng tối đa là 300px), class .modal-lg cho những modal lớn (độ rộng tối đa 800px), hoặc .modal-xl cho các modal cực lớn (độ rộng tối đa 1140px). Mặc định chiều rộng tối đa là 500px.
Code mẫu:
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>5. Modal toàn màn hình
Bạn có thể sử dụng chế độ toàn màn hình cho modal trong Bootstrap 5 bằng cách thêm class .modal-fullscreen.
Code mẫu:
<div class="modal-dialog modal-fullscreen">...</div>
Việc kiểm soát cách hiển thị đầy đủ modal theo từng kích thước màn hình, với class .modal-fullscreen-*-*
| Toàn màn hình khi kích thước màn dưới 576px | .modal-fullscreen-sm-down |
| Toàn màn hình khi kích thước màn dưới 768px | .modal-fullscreen-md-down |
| Toàn màn hình khi kích thước màn dưới 992px | .modal-fullscreen-lg-down |
| Toàn màn hình khi kích thước màn dưới 1200px | .modal-fullscreen-xl-down |
| Toàn màn hình khi kích thước màn dưới 1400px | .modal-fullscreen-xxl-down |
6. Modal dạng cuộn
Khi có quá nhiều nội dung trong modal thì một thanh cuộn có thể được thêm vào modal thay vì cuộn chính trang đó bằng cách thêm class .modal-dialog-scrollable vào .modal-dialog.
Code mẫu:
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
</div>Tổng kết
Modal không chỉ là một cửa sổ popup đẹp mắt mà còn là công cụ linh hoạt, giúp bạn giải quyết những thách thức cụ thể của việc xử lý thông tin và tương tác người dùng. Hãy nhớ rằng Bootstrap 5 không chỉ cung cấp Modal mà còn nhiều thành phần khác giúp bạn phát triển trang web của mình, xem thêm các bài viết bên dưới để tìm hiểu thêm về cách sử dụng Bootstrap nhé.
Sử dụng Pagination trong Bootstrap 5
Sử dụng Grid System trong Bootstrap
Cộng Đồng Linux là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 – 3 năm.
Bộ API giao tiếp của hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…
Quý bạn đọc quan tâm xin mời đăng ký bài viết mới:
Đăng ký liền tay Nhận Ngay Bài Mới
Subscribe ngay
Cám ơn bạn đã đăng ký !
Lỗi đăng ký !
Add Comment