Bài 8: Modal – Tạo hộp thoại trong Bootstrap – Chú thích Popover

Trong bài học này, chúng ta sẽ tìm hiểu về Modal – tạo hộp thoại trong Bootstrap. Ngoài ra, mình cũng sẽ giới thiệu thêm về cách tạo chú thích bằng Popover. Mình chỉ giới thiệu những thành phần cơ bản, còn những tùy chỉnh nâng cao, bạn có thể tham khảo thêm trên trang tài liệu tham khảo của Bootstrap.

Video – Modal – Tạo hộp thoại trong Bootstrap

Hướng dẫn chi tiết

Hộp thoại Modal

Hộp thoại modal thường dùng để kiểm tra lại lệnh của người dùng vì mục đích an toàn. Ví dụ, người dùng đăng hoạt xóa 1 đ1ôi tượng, khi click vào một button sẽ hiện hộp thoại xác nhận lệnh.

Phần hộp thoại

+ Khối bao bên ngoài có class=”modal” và một id đặt tùy ý, nên đặt id liên quan đến nội dung hay công dụng của hộp thoại để dễ quản lý.

+ Bên trong là một khối class=”modal-dialog”, bên trong nữa là một khối class=”modal-content”.

+ Phần content gồm 3 phần

modal-header: chứa tiêu đề của hộp thoại và mộ nút đóng hộp thoại.

<div class="modal-header">
<h4 class="modal-title">Xóa</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
</div>

button có thuộc tính quan trọng nhất cần nhớ là data-dismiss=”modal” để đóng hộp thoại. Điểm này khá giống với Alert mà mình đã giới thiệu.

thẻ span để tạo dấu X theo định nghĩa sẵn của Bootstrap.

modal-body: chứa nội dung thông báo, hay câu hỏi.

<div class="modal-body">
Bạn có chắn chắc muốn xóa không?
</div>

modal-footer: chứa các button xử lý.

<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">OK</button>
</div>

Phần button Delete gọi modal

<button class=”btn btn-danger” data-toggle=”modal” data-target=”#modalDelele”>Delete</button>

Điều cần nhớ về button gọi modal là 2 thuộc tính data-toggle=”modal” và data-target=”#id-của-modal”. Nhớ có dấu #

Chú thích Popover

Popover dùng để chú thích cho một button hay thẻ a nào đó. Khi click vào button, chú thích sẽ hiện ra.

Popover được xây dựng dựa trên thư viện của bên thứ ba là Popper JS nên cần thêm file popper.min.jsvào trước bootstrap.min.js. Các bạn có thể tải trong phần overview của doc bootstrap hoặc tải code demo bên dưới, trong đó mình đã thêm sẵn file popper.min.js.

Cách dùng:

+ Thêm popper.min.js

<script src="jquery-3.3.1.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

+ Sử dụng

<button type="button" class="btn btn-outline-info" data-toggle="popover" data-container="body" data-placement="right" data-content="popover content" title="Popover title" data-trigger="focus">Popover</button>

Các thuộc tính

data-toggle=”popover”

data-container=”body”

data-placement=”right”: chú thích xuất hiện bên phải

title: tiêu đề của popover

data-content: nội dung chú thích

+ Thêm đoạn mã js vào bên dưới cùng, nằm dưới thẻ script bootstrap.min.js

<script type="text/javascript">
$(function () {
   $('[data-toggle="popover"]').popover()
})
</script>

+ Muốn tắt chú thích thì nhấn vào button 1 lần nữa. Nếu muốn tắt chú thích theo dạng click vào bất kỳ chỗ nào, chúng ta thêm thuộc tính data-trigger=”focus” và thêm đoạn js sau

<script type="text/javascript">
$(function () {
   $('[data-toggle="popover"]').popover()
})
$('.popover-dismiss').popover({
   trigger: 'focus'
})
</script>

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ