Bootstrap - Modal Demo

Modal là gì?

Xin chào các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ cùng nhau lặn sâu vào thế giới thú vị của các modal trong Bootstrap. Như một người giáo viên máy tính gần gũi, tôi ở đây để hướng dẫn bạn từng bước trong hành trình này. Vậy, hãy lấy饮料 yêu thích của bạn, thoải mái và cùng nhau bắt đầu cuộc phiêu lưu modal này nhé!

Định nghĩa và Mục đích

Một modal, trong术语 phát triển web, giống như một cửa sổ pop-up xuất hiện trên trang hiện tại. Đây là một cách tuyệt vời để hiển thị nội dung mà không cần điều hướng khỏi giao diện hiện tại. Hãy tưởng tượng bạn đang đọc một bài báo, và đột nhiên bạn muốn biết thêm thông tin về một thuật ngữ cụ thể. Thay vì mở một trang mới, một modal có thể xuất hiện với các chi tiết bổ sung, cho phép bạn nhanh chóng quay lại việc đọc của mình. Đẹp phải không?

Bootstrap, người bạn đáng tin cậy của chúng ta trong thiết kế web, cung cấp một thành phần modal xuất sắc, dễ sử dụng và rất tùy chỉnh. Hãy cùng khám phá cách triển khai nó!

Cấu trúc Modal Cơ bản

Cấu trúc HTML

Hãy bắt đầu với cấu trúc HTML cơ bản của một modal Bootstrap:

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Tiêu đề Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Đóng">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Nội dung của modal ở đây.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Đóng</button>
<button type="button" class="btn btn-primary">Lưu thay đổi</button>
</div>
</div>
</div>
</div>

Hãy phân tích này:

1. <div> ngoài cùng với lớp modal là containner cho toàn bộ modal của chúng ta.
2. Bên trong, chúng ta có modal-dialog để căn giữa nội dung modal.
3. modal-content div giữ nội dung thực tế của modal.
4. Chúng ta có ba phần chính:

• modal-header: Chứa tiêu đề và nút đóng.
• modal-body: Đặt nội dung chính.
• modal-footer: Thường chứa các nút hành động.

Khởi động Modal

Bây giờ, làm thế nào để chúng ta làm modal này xuất hiện? Chúng ta cần một trigger! Thường là một nút:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Khởi động modal demo
</button>

Chú ý data-toggle="modal" và data-target="#exampleModal". Những này告诉 Bootstrap điều gì cần làm (bật modal) và modal nào cần hiển thị (người có id "exampleModal").

Đừng quên thêm id vào modal của bạn để khớp với data-target:

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<!-- Nội dung modal ở đây -->
</div>

Tùy chỉnh Modal của Bạn

Kích thước

Bootstrap cho phép bạn dễ dàng thay đổi kích thước modal. Chỉ cần thêm một lớp vào modal-dialog:

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

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

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

Modal Căn Trung

Muốn modal của bạn được căn giữa hoàn hảo? Thêm lớp modal-dialog-centered:

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

Modal Cuộn

Nếu nội dung modal của bạn dài, bạn có thể làm cho nó có thể cuộn:

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

Thêm Chức Năng với JavaScript

Trong khi các thuộc tính dữ liệu của Bootstrap rất tốt cho chức năng cơ bản, đôi khi bạn cần nhiều quyền kiểm soát hơn. Đó là lúc JavaScript vào cuộc!

// Hiển thị modal
$('#exampleModal').modal('show');

// Ẩn modal
$('#exampleModal').modal('hide');

// Bật/tắt modal
$('#exampleModal').modal('toggle');

Bạn cũng có thể lắng nghe các sự kiện modal:

$('#exampleModal').on('shown.bs.modal', function () {
console.log('Modal bây giờ đã hiển thị!');
})

Ví dụ Thực tế: Modal "Xác nhận Xóa"

Hãy öss hợp tất cả với một ví dụ thực tế. Hãy tưởng tượng chúng ta đang xây dựng một ứng dụng danh sách việc cần làm, và chúng ta muốn xác nhận trước khi xóa một nhiệm vụ:

<!-- Nút xóa -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
Xóa Nhiệm vụ
</button>

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Xác nhận Xóa</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Đóng">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Bạn có chắc chắn muốn xóa nhiệm vụ này? Hành động này không thể hoàn tác.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Hủy bỏ</button>
<button type="button" class="btn btn-danger" id="confirmDelete">Xóa</button>
</div>
</div>
</div>
</div>

Và đây là một chút JavaScript để xử lý việc xóa:

$('#confirmDelete').on('click', function() {
// Mã để xóa nhiệm vụ ở đây
console.log('Nhiệm vụ đã bị xóa!');
$('#deleteModal').modal('hide');
});

Kết luận

Chúc mừng! Bạn vừa học được cách sử dụng modal trong Bootstrap. Từ cấu trúc cơ bản đến tùy chỉnh và thậm chí một ví dụ thực tế, bạn bây giờ đã có khả năng thêm tính năng mạnh mẽ này vào các dự án web của mình.

Nhớ rằng, thực hành là cách tốt nhất để thành thạo. Hãy thử tạo các loại modal khác nhau, thử nghiệm với các kích thước và vị trí, và quan trọng nhất, hãy vui vẻ với nó! Ai biết, bạn có thể trở thành "Chúa tể Modal" trong số bạn bè lập trình của mình.

Chúc bạn lập trình vui vẻ, và hy vọng các modal của bạn luôn xuất hiện đúng thời điểm!

Credits: Image by storyset