[BOOTSTRAP] Bài 12: Modal, Tooltip, Popover, và Toast trong bootstrap 4

Trong bài viết này codecamp sẽ hướng dẫn các bạn cách sử dụng Modal, Tooltip, Popover, và Toast - đây đều là các component phổ biến trong bootstrap dùng để xây dựng website.

 

Modal 

Modal là một thành phần cần thiết trong thiết kế web giúp hiển thị Popup, video, hình ảnh. Có thể nhúng tập tin “modeal.js” hoặc “bootstrap.js” hoặc “bootstrap.min.js” để sử dụng chức năng modal trong bootstrap.

Kính hoạt modal với một button

Phần “Trigger the modal with a button(Kính hoạt modal với một button)”: Để kích hoạt một Modal, ta cần kết hợp với một nút bấm(button) hoặc một liên kết(link). Sau đó thêm một số thuộc tính: data-toggle=”modal” để mở của số modal, data-target=”#myModal” để chỉ đến id của modal cần mở.

Thẻ div chứa class .modal phải có id tương ứng với giá trị id của thuộc tính data-target, để kính hoạt id cần mở( ví dụ mở đây id là :”myModal”). Lớp .fade dùng để thêm hiệu ứng fade(mờ dần) khi modal xuất hiện hoặc biến mất. Thuộc tính role = “dialog” để tạo một hộp thoại cho modal nối giữa màn hinh, Các thuộc tính khác ngoài hộp thoại sẽ hiển thị màu tối. Lớp .modal-dialog để thiết lập chiều rộng và lề cho modal.

Phần “Modal content (Nội dung của modal)“

Phần tử div với lớp class = “Modal-content” để định nghĩa style cho modal(Viền , màu nền,…) bên trong phần tử div, ta thêm các lớp phaàn đầu (header), phần thân (body), phần chân(footer) của modal. Lớp Lớp .modal-header định nghĩa phong cách phần đầu Modal. Nút bên trong phần đầu có thuộc tính data-dismiss=”modal” để đóng Modal nếu được nhấn. Lớp .close để phong cách cho nút đóng, và lớp .modal-title để tạo phong cách cho văn bản phần đầu Modal. Lớp .modal-body để định nghĩa phong cách cho phần thân Modal. Lớp .modal-footer dùng để định nghĩa phong cách cho phần chân footer.

Thay đổi kính thước modal

 Để thay đổi kính thước modal, chúng ta có thể thêm lớp .modal-sm cho các modal có kích thước nhỏ và lớp .modal-lg cho các modal có kích thước lớn, Hoặc có thể chỉnh bằng thuộc tính style = “width:xx; height:xx”

Tooltip

Đầu tiên, Có thể nhúng “tooltip.js”  hoặc  “bootstrap.js”  hoặc  “bootstrap.min.js”  vào trang web để định nghĩa tooltip. Sau đó, thêm thuộc tính data-toggle=”tooltip” vào 1 phần tử bất kỳ, dùng thuộc tính title để định nghĩa văn bản cần hiển thị tooltip. Bạn cũng cần phải thêm 1 đoạn mã JavaScript để gọi phương thức tooltip() bằng thư viện JQuery như đoạn mã ở dưới.

Vị trí Tooltip: mặc định thì tooltip sẽ hiển thị trên đầu của một phần tử, nhưng ta có thể dùng thuộc tinh data-placement để thiết lập vị trí hiển thị của tooltip ở top, bottom, left hay right của phần tử

Cũng có thể chèn nội dung mã HTML vào tooltip:

Popover

Popover là một hộp pop-up xuất hiện khi người dùng nhất chuột lên một phần tử nào đó. Popover khác tooltip ở chỗ popover chứa nhiều nội dung hơn.

Tạo một Popover

Ta nhúng tập tin “Popover.js” hoặc “bootstrap.js”  hay  “bootstrap.min.js”  để  định nghĩa popover.

Thêm thuộc tinh data-toggle = “poppver” vào phần tử, sau đó dùng thuộc tích title để đặc tả phần đầu văn bản của popover, và dùng thuộc tinh data-content để đặc tả văn bản hiển thị bên trong nội dung popover.

Thay đổi vị trí của popover

Mặc định thì bảng Popover sẽ xuất hiện ở bên phải của phần tử. Có thể sử dụng thuộc tính data-placement để định nghĩa vị trí hiển thị popover(top, bottom, left, right)

Đóng Popover

Ta có thể đóng bằng cách nhấp chuột vào chữ thêm một lần nữa, tuy nhiên cũng có thể dùng thuộc tính data-trigger=”focus” để đóng popover khi muốn đóng chỉ cần nhấp chuột ra ngoài vùng phần tử đó.

Nếu muốn khi kéo chuột vào phần tử đó thì hiện bảng popover và kéo chuột ra chỗ khác để đóng popover thì có thể dùng thuộc tính data-trigger=”hover”

Toast

Toast là một bảng thông báo được hiển thị trong vài giây khi người dùng ấn vào nút, gửi biểu mẫu,… Toasts được khởi tạo với JQuery và để hiển thị sử dụng đoạn code trong document sau:

Tạo toast

Để tạo toast ta dùng class .toast và thêm một .toast-header để thêm phần đầu cảnh báo và .toast-body để thêm phần bên trong(body) của cảnh báo

Đóng toast

Bình thường theo mặc định bảng toast sẽ tự động đóng. Dùng data-autohide = “false” để mặc định hiển thị bảng toast. 

 


Các nội dung liên quan:

Tháng 04 - Codecamp mở lớp lập trình web chuyên nghiệp bằng Laravel

Đây là khoá học nâng cao học về Laravel - một framework php hàng đầu thế giới. Nếu bạn mong muốn phát triển dự án chuyên nghiệp, bảo mật, nhu cầu tuyển dụng cao thì tham gia khoá học này.

Tháng 04 - Codecamp mở lớp học lập trình Web Php Từ Cơ Bản Đến Nâng Cao Theo MVC OOP

Mastering PHP là chương trình được biên soạn kỹ lưỡng từng bước một giúp bất kỳ ai có thể làm chủ được việc xây dựng hệ thống website sau thời gian ngắn ngay cả khi chưa có kiến thức nền tảng. Khoá học đầy đủ nội dung và được hướng dẫn tỉ mỉ, chi tiết, cầm tay chỉ code đến khi code được thì thôi.

Top 19 website học lập trình miễn phí cực chất lượng

Những kênh dạy lập trình căn bản bằng Tiếng Việt trên đây là những kênh thông tin tuyệt vời giúp các học viên dù là người mới hay đã có kinh nghiệm lập trình có thể lựa chọn để làm một kênh thông tin tham khảo thêm những kiến thức lập trình phong phú khi lập trình trang web, ứng dụng hoặc tạo lập dự án.