Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
9 Bootstrap Modal Cho Website

9 Bootstrap Modal Cho Website


Ngày 23 Tháng 1 Năm 2021

Hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế component modal bằng cách kết hợp HTML, CSS, Javascript và Bootstrap nhé.

Modal Là Gì?

Modal cơ bản là một hộp thoại hay cửa sổ bật lên được dùng để cung cấp thông tin quan trọng hay nhắc nhở người dùng thực hiện các hoạt động cần thiết trước khi tiếp tục. Ví dụ bạn tạo nút thanh toán sản phẩm để người dùng mua hàng thì thay vì phải chuyển sang trang khác để nhập thông tin thanh toán của người dùng thì ở ngay trang mua hàng chúng ta sẽ sử dụng modal để chứa Form thanh toán để người dùng nhập vào. Bạn có thể tìm hiểu thêm ở đây nhé: Modal. Việc chúng ta sử dụng component này giúp hạn chế việc tải trang gây khó chịu cho người dùng và tiết kiếm không gian cho trang web của bạn.

Để hiểu rõ hơn bạn xem ví dụ về footer trong trang web dưới đây nhé:

Ví dụ về modal trong trang web

Sau đây mình sẽ liệt kê danh sách các thành phần hay được tích hợp vào modal ở trong trang web hiện nay nhé:

  • Hình ảnh, Video: Nó cho phép sử dụng hình ảnh, video thu nhỏ thay vì toàn phần giúp chúng ta tiết kiệm không gian trang, bố cục có tổ chức hơn và giảm thời gian tải trang web của bạn.
  • Form: Nó giúp người dùng xử lý nhập thông tin ngay trên trang mà không cần phải điều hướng gây ra sự khó chịu cho người dùng. Các form hay được sử dụng là contact form, đăng nhập, đăng ký, thanh toán...
  • Thông báo, chú ý (alert): Dùng để thông báo về một hành động quan trọng cần sự lựa chọn các phương thức xử lý của người dùng. Ví dụ chúng ta có một danh sách sản phẩm trong database và người dùng muốn xóa đi một sản phẩm nào đó thì bạn nên hiển thị modal để chắc chắn người dùng đã chọn đúng sản phẩm và có thể đồng ý xóa hoặc hủy.
  • Tip: Cung cấp các mẹo hay thông tin thêm để sử dụng các chức năng trong trang web được tốt nhất có thể.

Bây giờ mình sẽ giới thiệu tiếp một số Modal được thiết kế sẵn bằng HTML, CSS, Bootstrap và Javascript giúp bạn có thể đa dạng lựa chọn phù hợp với bố cục cũng như thiết kế của trang web.

Các Ví Dụ Về Modal CSS Javascript Cho Website

Ví Dụ Modal Bằng Css:

Modal Bằng Css

Modal này được xây dựng thiết kế đơn giản với hai phần riêng biệt là hình ảnh và nội dung. Bạn có thể thay đổi nội dung tùy vào mục đích sử dụng của mình. Và do được xây dựng bằng HTML, CSS nên chúng ta có thể áp dụng nó cho nhiều loại trang web khác nhau. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen Pure Css Popup by Erdem Uslu (@erdemuslu) on CodePen.

Nguồn

Tạo Modal Dạng Popup Và Overlay:

Modal Dạng Popup Và Overlay

Sau đây là ví dụ về việc kết hợp hình ảnh với Modal. Khi người người nhấn vào hình thì modal sẽ mở rộng toàn bộ trang và chỉ chứa hình được chọn ở vị trí chính giữa giúp thu hút sự tập trung của người dùng hơn. Ngoài ra thành phần modal còn có tiêu đề và nội dung hình ảnh giúp cung cấp thêm thông tin cho người sử dụng. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen DailyUI #016 - Popup / Overlay by Fabio Ottaviani (@supah) on CodePen.

Nguồn

Tạo Form Đăng Ký Và Đăng Nhập Modal:

Form Đăng Ký Và Đăng Nhập Modal

Modal này sẽ hiển thị form đăng nhập, đăng ký bằng cách nhấn vào nút tương ứng trên trang. Nó giúp người dùng không cần phải chuyển sang trang khác để thực hiện hành động và trong component modal có thể chuyển đổi qua lại giữa đăng nhập, đăng ký. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen Responsive Login/Signup Modal Window by CodyHouse (@codyhouse) on CodePen.

Nguồn

Tạo Modal Dạng Video Cho Trang Web:

Modal Youtbe Video HTML5

Đây là ví dụ giúp chúng ta kết hợp modal với video. Nó sử dụng hình ảnh chứa liên kết để đại diện cho video và khi người dùng nhấn vào thì sẽ gọi ra modal chứa video với màn hình xung quanh bị làm mờ giúp thu hút chú ý và tập trung của người dùng vào modal hơn. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen YouTube Video Modal by Matt Amyot (@mattamyot) on CodePen.

Nguồn

Tạo Hiệu Ứng Chuyển Động Cho Modal:

ạo Hiệu Ứng Chuyển Động Cho Modal

Ngoài cách sử dụng các thành phần trong modal thì dưới đây mình sẽ giới thiệu thêm các hiệu ứng chuyển động giúp bạn có lựa chọn đa dạng và phong phú hơn. Ngoài ra cũng tăng cảm giác trải nghiệm khi người dùng sử dụng trang web của chúng ta. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen 30+ Bootstrap Modal Animation Effects by Wisnu ST (@wisnust10) on CodePen.

Nguồn

Kết Hợp Modal Và Flexbox:

Kết Hợp Modal Và Flexbox

Đây là tập hợp các modal được thiết kế sẵn và được xây dựng bằng HTML, CSS và Javascript nên bạn có thể tự do lựa chọn và áp dụng vào trong web của mình. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen Simple, flexible, and responsive flexbox-based modal by Bryan Chalker (@bchalker) on CodePen.

Nguồn

Tạo Animation Modal Với Velocity.js :

Animation Modal Với Velocity.js

Đây là tập hợp các modal được thiết kế sẵn và được xây dựng bằng HTML, CSS, Javascript và plugin Velocity.js (bạn có thể tìm hiểu ở đây nhé: Velocity.js). Ngoài việc tạo hiệu ứng chuyển động nó còn giúp chúng ta hiển thị vị trí của các tooltip (cung cấp thêm thông tin cho người dùng về nhiệm vụ, chức năng của nút) cho các button. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen Bootstrap Modal and popover with Velocity.js animation by Mike Sozanski (@macsupport) on CodePen.

Nguồn

Tạo Modal 3D:

Modal 3D

Đây là tập hợp các modal được thiết kế sẵn với HTML, CSS và Javscript và đặc biệt phù hợp với ai yêu thích hiệu ứng chuyển động 3D. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen Nifty Modal Window or Slider Effects by coldarif (@coldarif) on CodePen.

Nguồn

Thiết Kế Responsive Modal :

Responsive Modal

Đây là tập hợp các modal được thiết kế theo phong cách material. Bạn có thể tìm hiểu thêm về materail ở đây nhé Tìm hiểu thêm. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi modal này được hiển thị trên web ở dưới đây nhé:

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện component Modal cho trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!