Modal Bootstrap là gì: Hướng dẫn sử dụng từ cơ bản đến nâng cao

Nội dung bài viết

Trong quá trình xây dựng giao diện người dùng, bạn thường sẽ gặp nhu cầu hiển thị các cửa sổ nổi bật như hộp thoại thông báo, form nhập liệu hoặc hình ảnh xuất hiện nổi lên trên giao diện chính. Modal trong Bootstrap chính là công cụ tuyệt vời giúp bạn thực hiện việc này một cách đơn giản, nhanh chóng và đẹp mắt với hiệu ứng chuyển động nhẹ nhàng.

Trong bài viết này, bạn sẽ được tìm hiểu:

Modal Bootstrap dùng để làm gì? Có ưu – nhược điểm gì?
Cách sử dụng Modal với HTML và JavaScript
Cách tùy chỉnh Modal (kích thước, nền mờ phía sau,…)
Những lưu ý quan trọng khi sử dụng Modal trong Bootstrap

Modal trong Bootstrap là một hộp thoại nổi (pop-up), hiển thị lên trên tất cả nội dung trang, chặn người dùng tương tác với phần nền bên dưới. Về bản chất, đây là một thành phần được xây dựng từ HTML, CSS và JavaScript, đặt ở vị trí cố định (position: fixed), và khi được kích hoạt sẽ tự động ngăn cuộn nội dung trang ngoài modal, tập trung người dùng vào phần nội dung chính bên trong modal.

Cấu trúc cơ bản của Modal gồm ba phần: header (tiêu đề của Modal), body (nội dung chính), và footer (các nút hành động, lời ghi chú,…).

Ví dụ về modal:

Modal thường được dùng để:

Hiển thị thông báo quan trọng, cảnh báo hoặc xác nhận hành động;
Chứa form nhập liệu (đăng nhập, đăng ký, gửi phản hồi);
Tạp ra trải nghiệm xem ảnh, video, hoặc nội dung bổ sung đến người dùng mà không di chuyển trang;
Trong các tình huống cần người dùng tập trung vào một hành động cụ thể và quay trở lại màn hình hiện tại sau khi xử lý ở modal.

Modal Bootstrap mang lại nhiều lợi ích đáng kể trong thiết kế giao diện người dùng, nhưng cũng tồn tại một số hạn chế cần lưu ý. Việc hiểu rõ những ưu, nhược điểm này sẽ giúp bạn áp dụng Modal Bootstrap một cách hiệu quả và phù hợp hơn với từng ngữ cảnh cụ thể.

Ưu điểm

Là thành phần có sẵn của Bootstrap, giúp việc phát triển được nhanh chóng
Tập trung sự chú ý của người dùng vào thông tin hoặc hành động quan trọng mà không làm gián đoạn bố cục tổng thể
Tiết kiệm không gian giao diện, tránh chuyển hướng sang trang mới, giúp trải nghiệm người dùng liền mạch hơn
Có sẵn các hiệu ứng chuyển động và khả năng tùy chỉnh linh hoạt, giúp bạn tạo ra trải nghiệm hấp dẫn, thân thiện người dùng

Nhược điểm

Tuy nhiên, Modal cũng có một số điểm yếu cần được cân nhắc kỹ trước khi áp dụng rộng rãi:

Việc sử dụng quá nhiều hoặc hiển thị Modal chồng chéo có thể khiến người dùng cảm thấy bối rối, khó thao tác và gây mất tập trung
Về mặt kỹ thuật, vị trí cố định (position: fixed) đôi khi gây khó khăn khi tích hợp vào bố cục hiện có, nhất là khi layout có nhiều thành phần được định vị riêng
Trên các thiết bị di động, Modal chưa được tối ưu tốt có thể che khuất nội dung quan trọng hoặc gây khó khăn khi thao tác bằng cảm ứng

Một Modal hoàn chỉnh trong Bootstrap bao gồm các thành phần như sau:

Đây là nút (hoặc liên kết) giúp mở Modal. Thành phần này thường có hai thuộc tính quan trọng:

data-bs-toggle=“modal”: Cho biết đây là nút mở modal
data-bs-target=“#idModal”: Xác định ID của modal sẽ hiển thị

Ví dụ:

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#idModal">
       Nút mở modal
  </button>

Tuy nhiên, trong một số trường hợp, Modal có thể được kích hoạt bởi JavaScript.

Modal được khai báo trong một thẻ <div> có lớp .modal. Nó là container chính chứa toàn bộ nội dung modal:

     <div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <!-- Các thành phần khác (header, body, footer) sẽ nằm ở đây -->
         </div>
       </div>
     </div>

Giải thích từng class chính:

modal: xác định đây là một cửa sổ Modal.
fade: tạo hiệu ứng xuất hiện nhẹ nhàng khi mở modal.
modal-dialog: là khung chứa modal, giúp xác định kích thước và vị trí hiển thị.
modal-content: định dạng vùng chứa toàn bộ nội dung modal (header, body, footer).

Nằm bên trong <div class=“modal-header”>, phần này thường chứa tiêu đề và nút đóng.

         <div class="modal-header">
             <h5 class="modal-title">Tiêu đề của Modal</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>

Giải thích:

modal-header: phần đầu Modal, có định dạng rõ ràng, thường chứa tiêu đề và nút đóng.
modal-title: định dạng văn bản tiêu đề Modal.
btn-close: nút đóng modal, khi click sẽ đóng modal ngay lập tức.
Thuộc tính data-bs-dismiss=“modal” là để đóng modal khi bấm vào nút này.

Nội dung chính của Modal được đặt trong thẻ <div class=“modal-body”>.

           <div class="modal-body">
             <p>Nội dung chính của modal</p>
           </div>

Giải thích:

modal-body: là vùng chứa nội dung chính. Bạn có thể đặt bất cứ nội dung nào ở đây tùy vào mục đích sử dụng như: văn bản, form nhập liệu, hình ảnh, video…

Nằm trong thẻ <div class=“modal-footer”>, chứa các nút hành động như “Lưu thay đổi”, “Đóng”, hay “Gửi đi”.

           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
             <button type="button" class="btn btn-primary">Lưu</button>
           </div>

Giải thích:

modal-footer: phần chân của modal, nơi đặt các nút thao tác quan trọng. Thường dùng các nút với class như .btn-secondary (đóng) hoặc .btn-primary (xác nhận hành động chính).
Thuộc tính data-bs-dismiss=“modal” tương tự như nút đóng ở phần header, giúp đóng modal khi click.

Ví dụ về code của một Modal Bootstrap:

<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title">Tiêu đề của Modal</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
             <p>Nội dung chính của modal</p>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
             <button type="button" class="btn btn-primary">Lưu</button>
           </div>
         </div>
       </div>
</div>

Kết quả:

Modal là một thành phần rất linh hoạt, có thể được áp dụng trong nhiều ngữ cảnh khác nhau khi thiết kế giao diện web. Dưới đây là một số trường hợp phổ biến mà bạn có thể sử dụng Modal Bootstrap để mang lại trải nghiệm người dùng tốt hơn:

Hiển thị thông báo xác nhận (Confirmation Dialog)

Trong các thao tác như xóa dữ liệu, gửi đơn hàng, hoặc thực hiện hành động quan trọng, việc hiển thị một hộp thoại xác nhận giúp người dùng kiểm tra lại quyết định của mình.

Code ví dụ:

<!-- Nút kích hoạt Modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">
 Xóa bài viết
</button>

<!-- Modal xác nhận -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="confirmDeleteLabel">Xác nhận xóa</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
     </div>
     <div class="modal-body">
       Bạn có chắc chắn muốn xóa bài viết này không?
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Huỷ</button>
       <button type="button" class="btn btn-danger">Xác nhận xóa</button>
     </div>
   </div>
 </div>
</div>

Kết quả:

Nhập liệu hoặc đăng nhập

Modal rất phù hợp để chứa các form nhập liệu đơn giản như form đăng nhập, đăng ký, khôi phục mật khẩu, giúp người dùng có thể thao tác mà không cần chuyển hướng trang web.

Ví dụ code mẫu:

<!-- Nút mở Modal đăng nhập -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
 Đăng nhập
</button>

<!-- Modal Đăng nhập -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="loginModalLabel">Đăng nhập tài khoản</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
     </div>
     <div class="modal-body">
       <form>
         <div class="mb-3">
           <label for="loginEmail" class="form-label">Email</label>
           <input type="email" class="form-control" id="loginEmail" placeholder="Nhập email">
         </div>
         <div class="mb-3">
           <label for="loginPassword" class="form-label">Mật khẩu</label>
           <input type="password" class="form-control" id="loginPassword" placeholder="Nhập mật khẩu">
         </div>
         <button type="submit" class="btn btn-primary">Đăng nhập</button>
       </form>
     </div>
   </div>
 </div>
</div>

Kết quả:

Thông báo kết quả hành động

Sau khi người dùng thực hiện thao tác như gửi form, thanh toán…, modal có thể hiện thông báo trạng thái. Ví dụ:

<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered"> <!-- Hiển thị giữa màn hình -->
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title text-success" id="successModalLabel">Thành công!</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
     </div>
     <div class="modal-body">
       Cảm ơn bạn đã gửi thông tin. Chúng tôi sẽ liên hệ sớm!
     </div>
   </div>
 </div>
</div>

<!-- JavaScript kích hoạt tự động sau khi submit -->
<script>
 // Ví dụ: Hiển thị modal thành công sau khi form được gửi thành công
 // new bootstrap.Modal(document.getElementById('successModal')).show();
</script>

Trong ví dụ trên, model được kích hoạt thông qua code Javascript để bắt sự kiện sau khi form được gửi thành công.

Kết quả:

Một trong những điểm mạnh của Modal trong Bootstrap là khả năng tùy chỉnh kích thước và điều chỉnh vị trí hiển thị một cách dễ dàng, giúp bạn tạo ra giao diện phù hợp với nhiều loại nội dung khác nhau.

Tùy chỉnh kích thước

Bootstrap cung cấp sẵn một số lớp tiện ích (utility classes) giúp bạn điều chỉnh kích thước của Modal mà không cần viết CSS thủ công, bạn có thể thêm các class này vào thành phần .modal-dialog:

.modal-sm: Modal nhỏ (small)

<!-- Modal nhỏ -->
 <div class="modal-dialog modal-sm">
   ...
 </div>

.modal-lg: Modal lớn (large)

<!-- Modal lớn -->
 <div class="modal-dialog modal-lg">
   ...
 </div>

.modal-xl: Modal rất lớn (extra large)

<!-- Modal rất lớn -->
 <div class="modal-dialog modal-xl">
   ...
 </div>

.modal-fullscreen: Modal chiếm toàn bộ màn hình

 <div class="modal-dialog modal-fullscreen">
   ...
 </div>

Tùy chỉnh vị trí

Mặc định, Modal sẽ xuất hiện sát phía trên (top) của màn hình. Ví dụ:

Nhưng bạn hoàn toàn có thể điều chỉnh lại vị trí của Modal nếu cần. Ví dụ:

Nếu bạn muốn Modal xuất hiện ở trung tâm của màn hình, bạn có thể sử dụng class .modal-dialog-centered:

<div class="modal-dialog modal-dialog-centered">
 ...
</div>

Ví dụ:

<div class="modal fade" id="modalSmall" tabindex="-1" aria-labelledby="modalSmallLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="modalSmallLabel">Modal căn giữa</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
     </div>
     <div class="modal-body">
       Đây là nội dung modal căn giữa.
     </div>
   </div>
 </div>
</div>

Kết quả:

Khi nội dung Modal có chiều cao lớn hơn kích thước viewport, bạn có thể thêm .modal-dialog-scrollable để phần body của Modal có thể cuộn được:

<div class="modal-dialog modal-dialog-scrollable">
 ...
</div>

Ví dụ:

<!-- Modal nội dung dài -->
<div class="modal fade" id="longContentModal" tabindex="-1" aria-labelledby="longContentModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-scrollable">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="longContentModalLabel">Modal có nội dung dài</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
     </div>
     <div class="modal-body">
       <p>Đây là phần nội dung rất dài. Khi nội dung vượt quá chiều cao của màn hình, phần thân Modal sẽ cuộn.</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
       <p>Phần nội dung lặp...</p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
     </div>
   </div>
 </div>
</div>

Bên cạnh việc sử dụng các thuộc tính HTML (data-bs-toggle, data-bs-target) để mở modal, Bootstrap cũng cung cấp API JavaScript rất mạnh mẽ giúp bạn điều khiển modal linh hoạt hơn. Việc này rất hữu ích khi bạn cần xử lý modal theo các tình huống động (ví dụ: mở modal sau khi submit form, hoặc đóng modal khi hoàn thành một thao tác…).

Bootstrap Modal hỗ trợ nhiều phương thức giúp bạn có thể chủ động điều khiển modal qua JavaScript. Đầu tiên, bạn cần khởi tạo đối tượng modal:

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));

Các phương thức phổ biến:

Method	Chức năng
.show()	Hiển thị modal
.hide()	Đóng modal
.toggle()	Đảo ngược trạng thái modal (nếu đang mở thì đóng, đang đóng thì mở)
.dispose()	Hủy modal, giải phóng bộ nhớ

Ví dụ sử dụng JavaScript để kích hoạt hiển thị modal:

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Modal điều khiển qua JS</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
     </div>
     <div class="modal-body">
       Modal này được mở qua JavaScript!
     </div>
   </div>
 </div>
</div>

<!-- Nút bấm mở modal qua JS -->
<button type="button" class="btn btn-primary" onclick="openModalJS()">Mở Modal qua JavaScript</button>

<script>
 function openModalJS() {
   var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
   myModal.show();
 }
</script>

Trong đó, function openModalJS được gọi mỗi khi button được nhấn, function này có nhiệm vụ khởi tạo 1 đối tượng modal trong javascript và thực hiện hàm show() để hiển thị modal có id là exampleModal.

Bootstrap cũng hỗ trợ nhiều sự kiện (events) để bạn có thể bắt các trạng thái khi modal mở, đóng, hoàn tất,… Điều này rất hữu ích khi bạn cần thực hiện các tác vụ phụ như:

Load dữ liệu khi modal mở
Reset form khi modal đóng
Log thông tin hoặc tracking khi modal hoạt động

Các sự kiện phổ biến:

Sự kiện	Thời điểm xảy ra
`.show.bs.modal`	Khi bắt đầu mở modal
`.shown.bs.modal`	Khi modal đã mở hoàn tất
`.hide.bs.modal`	Khi bắt đầu đóng modal
`.hidden.bs.modal`	Khi modal đã đóng hoàn tất

Ví dụ để ghi log khi modal mở hoặc đóng, bạn có thể làm như sau:

<!-- Modal -->
<div class="modal fade" id="logModal" tabindex="-1" aria-labelledby="logModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="logModalLabel">Modal có sự kiện</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
     </div>
     <div class="modal-body">
       Kiểm tra console để xem log khi modal mở hoặc đóng!
     </div>
   </div>
 </div>
</div>

<!-- Nút bấm mở modal -->
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#logModal">
 Mở modal có sự kiện
</button>

<script>
 var logModal = document.getElementById('logModal');

 logModal.addEventListener('show.bs.modal', function () {
   console.log('Modal đang bắt đầu mở...');
 });

 logModal.addEventListener('shown.bs.modal', function () {
   console.log('Modal đã mở xong!');
 });

 logModal.addEventListener('hide.bs.modal', function () {
   console.log('Modal đang bắt đầu đóng...');
 });

 logModal.addEventListener('hidden.bs.modal', function () {
   console.log('Modal đã đóng xong!');
 });

</script>

Kết quả: Mỗi lần modal thay đổi trạng thái, thông tin được in ra ở console của trình duyệt:

Khi sử dụng modal, Bootstrap có cung cấp class .fade để tạo hiệu ứng mờ dần (fade-in / fade-out), tức là opacity từ 0 đến 1 khi mở, và ngược lại khi đóng.

<!-- Modal nội dung dài -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
  ...
</div>

Tuy nhiên, bạn hoàn toàn có thể kết hợp thêm các animation khác để modal trở nên sinh động hơn, ví dụ như trượt từ dưới lên, hoặc phóng to từ giữa màn hình. Một trong những hiệu ứng dễ áp dụng nhất là slide-in, giúp modal xuất hiện từ phía dưới lên:

<style>
@keyframes slideInUp {
 from {
   transform: translateY(100px);
   opacity: 0;
 }
 to {
   transform: translateY(0);
   opacity: 1;
 }
}


#exampleModal {
 animation: slideInUp 0.5s ease-out;
}
</style>

Trong đó:

@keyframes slideInUp: định nghĩa hiệu ứng slide-in cho đối tượng
Gán hiệu ứng vào modal chỉ định bằng thuộc tính animation

Modal trong Bootstrap vốn đã được thiết kế responsive sẵn. Tuy nhiên, Bootstrap còn hỗ trợ thêm nhiều class giúp bạn kiểm soát tốt hơn cách hiển thị modal trên từng loại thiết bị bằng cách kết hợp với các breakpoints như:

.modal-dialog-centered: căn giữa modal
.modal-fullscreen: fullscreen mọi thiết bị
.modal-fullscreen-sm-down: fullscreen nếu màn hình nhỏ hơn sm (576px)
.modal-fullscreen-md-down: fullscreen nếu màn hình nhỏ hơn md (768px)

Ví dụ cách sử dụng:

<div class="modal-dialog modal-lg modal-dialog-centered modal-fullscreen-sm-down">
 ...
</div>

Trong đó:

Trên desktop: modal hiển thị lớn, căn giữa với .modal-lg, .modal-dialog-centered
Trên mobile: modal chiếm fullscreen giúp dễ đọc và thao tác với .modal-fullscreen-sm-down

Đọc chi tiết: Responsive trong Bootstrap: Hướng dẫn từ cơ bản đến nâng cao

Mặc định, Modal Bootstrap sẽ được ẩn khi người dùng click ra khu vực bên ngoài nội dung modal. Như hình ảnh bên dưới, chỉ cần click vùng bên ngoài khu vực màu đỏ, bạn đã có thể tắt modal:

Trường hợp khi bạn muốn modal không bị đóng lúc người dùng click ra ngoài vùng modal hoặc bấm ESC (dùng cho các modal quan trọng như xác nhận xoá, modal bảo mật…), bạn có thể thêm các thuộc tính như:

data-bs-backdrop=“static”: Ngăn modal bị đóng khi click ra ngoài
data-bs-keyboard=“false”: Ngăn modal bị đóng khi bấm nút ESC trên bàn phím

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
 ...
</div>

Mặc định, modal của Bootstrap có giao diện khá tối giản: nền trắng, bo góc nhẹ, header có đường viền dưới mảnh, phần footer có viền trên, cùng một chút shadow để nổi lên trên nội dung trang.

Khi cần làm đẹp hơn cho modal để phù hợp với phong cách của website, bạn có thể dễ dàng tùy chỉnh thông qua các biến Sass (nếu dùng SCSS) hoặc ghi đè bằng CSS thông thường.

Nếu bạn sử dụng Sass, bạn có thể ghi đè các biến CSS để áp dụng định dạng mới cho các modal. Ví dụ:

$modal-content-bg: #fff; // đổi màu nền
$modal-content-color: #212529; // đổi màu chữ
$modal-header-border-color: #dee2e6; // đổi màu viền trên
$modal-footer-border-color: #dee2e6; // đổi màu viền dưới

Tùy chỉnh bằng CSS thường

Ngoài việc sử dụng Sass, bạn có thể ghi đè các class mà Modal sử dụng hoặc tạo các class CSS của riêng mình để định dạng Modal, ví dụ:

.modal-content {
  background-color: #f0f9ff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
  border-bottom: 3px solid #0d6efd;
  background-color: #e6f0ff;
}

.modal-footer-custom {
  background-color: #f9f9f9;
  border-top: none;
  padding: 1.5rem;
}

Trong đó:

.modal-content, .model-header là các class có sẵn mà modal sử dụng, được ghi đè lại để áp dụng định dạng mới.
.model-footer-custom là class tự định nghĩa và sử dụng kèm với .modal-footer

Đọc chi tiết: Bootstrap CSS là gì: Cách áp dụng và quản lý CSS với Bootstrap

Mặc dù Modal Bootstrap là một công cụ rất mạnh để hiển thị nội dung nổi bật trên giao diện web, nhưng nếu lạm dụng hoặc sử dụng không hợp lý, modal có thể gây ảnh hưởng tiêu cực đến trải nghiệm người dùng. Khi áp dụng modal vào dự án thực tế, bạn nên lưu ý một số điểm sau để đảm bảo hiệu quả sử dụng và sự thân thiện cho người dùng.

Chỉ sử dụng modal khi thực sự cần thiết: Modal nên được dùng để hiển thị thông tin hoặc hành động quan trọng cần sự tập trung cao của người dùng. Không nên lạm dụng modal cho các nội dung phụ hoặc thông tin có thể hiển thị trực tiếp trên trang.
Hạn chế mở nhiều modal chồng lên nhau: Không nên mở nhiều modal cùng lúc (modal stacking), vì điều này sẽ khiến người dùng bị rối và khó thao tác. Chỉ nên hiển thị tối đa 1 modal tại một thời điểm.
Kiểm soát cách đóng modal: Với những modal cần người dùng bắt buộc thao tác (ví dụ: modal xác nhận xoá, modal điền thông tin bắt buộc), hãy sử dụng data-bs-backdrop="static" và data-bs-keyboard="false" để tránh việc người dùng click ra ngoài hoặc nhấn ESC làm mất modal khi chưa hoàn thành hành động.
Đảm bảo hành vi rõ ràng khi submit form trong modal: Khi modal chứa form, sau khi xử lý xong (submit thành công), cần đóng modal rõ ràng hoặc hiển thị trạng thái kết quả để người dùng không bị hiểu nhầm là modal bị lỗi hoặc trang web bị treo.

Bootstrap cho phép bạn có thể hiển thị nhiều modal chồng lên nhau (modal stacking). Tuy nhiên, đây là điều không được khuyến khích trong thiết kế giao diện. Khi có nhiều modal cùng mở, người dùng rất dễ bị rối hoặc mất phương hướng trên màn hình, nhất là khi các modal có nội dung hoặc kích thước khác nhau.

Theo mặc định, modal của Bootstrap sẽ tự đóng khi người dùng click vào vùng nền mờ (backdrop) phía sau modal. Đây là hành vi giúp người dùng dễ dàng thoát modal khi không có nhu cầu tương tác tiếp.

Nếu bạn đã dùng thuộc tính data-bs-backdrop=“static” thì modal sẽ không đóng khi click ra ngoài. Lúc này, nếu muốn khôi phục hành vi đóng như mặc định, chỉ cần bỏ thuộc tính data-bs-backdrop=“static” ra khỏi thẻ modal.

Bootstrap hỗ trợ sẵn hiệu ứng chuyển động khi mở và đóng modal thông qua class .fade. Khi sử dụng .fade, modal sẽ có hiệu ứng mờ dần (fade-in) khi mở và mờ đi (fade-out) khi đóng.

<div class="modal fade" id="exampleModal" tabindex="-1">
 ...
</div>

Ngoài ra, bạn có thể hoàn toàn tự thêm các animation khác như slide, zoom, bounce bằng cách viết thêm CSS hoặc sử dụng các thư viện animation như Animate.css.

Tổng kết

Modal là một thành phần giao diện hữu ích trong Bootstrap, giúp bạn dễ dàng hiển thị các cửa sổ nổi bật, phục vụ nhiều mục đích khác nhau như thông báo, xác nhận hành động, nhập liệu hoặc trình bày nội dung chi tiết. Qua bài viết này, ITviec hy vọng đã mang đến cho bạn đọc cái nhìn toàn diện về cách sử dụng Modal trong Bootstrap, từ các khái niệm cơ bản, cách triển khai thực tế, đến các kỹ thuật nâng cao và lưu ý khi áp dụng vào dự án.