data-dismiss là gì

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ằngPopover. 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ủaBootstrap.

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.

Ví dụ cho Modal Tạo hộp thoại trong Bootstrap

Phần hộp thoại

+ Khối bao bên ngoài cóclass=modalvà 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ốiclass=modal-dialog, bên trong nữa là một khốiclass=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ớiAlertmà 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ínhdata-toggle=modalvà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.

Ví dụ cho Popover -Chú thích trong Bootstrap

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 filepopper.min.jsvào trước bootstrap.min.js. Các bạn có thể tải trong phần overview củadoc bootstraphoặ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ínhdata-trigger=focusvà 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áchcommentbên dưới, quaemail, hoặc nhắn tin quaFanpage Góc làm web.

Liên hệ