HOTLINE: + (123) 1800-567-8990
Mon - Fri: 9:00 - 19:00
  • English
  • Việt Nam
Blog

Tự tạo popup bằng js

Xin chào các bạn.
Là một Web Developer thì chắc các bạn không lạ lẫm gì với popup nhỉ, popup thường dùng để quảng cáo, hiển thị một thông báo, làm form đăng nhập, đăng ký,…
Search google với từ khóa ‘popup’ thì có hàng tá cách hướng dẫn tạo popup, nhưng theo mình thấy thì đa số là dùng plugin js có sẵn, đôi lúc các bạn sẽ không thích vì những plugin đó thường nặng, làm chậm tốc độ website của bạn.

Hôm nay Sichiblog sẽ hướng dẫn các bạn các bạn tự tạo 1 popup đơn giản, gọn nhẹ bằng jquery nhé 😀

Bước 1. Tạo 1 button để khi click vào hiển thị popup

Bước 2. Tạo một div chứa nội dung popup bạn muốn hiển thị (quảng cáo, thông báo,…)

Và đây là css của #content-popup

Tiếp theo, khi popup hiện lên, mình làm toàn bộ nội dung ở dưới đen đen mờ mờ, nhìn cho nó nguy hiểm 😀 , thêm vào css như sau

Bước 3. Làm popup hoạt động với jquery

Đầu tiên gọi thư viện nhé

Tiếp theo là code xử lý

Ok vậy là ta đã có 1 popup cực kì đơn giản, gọn nhẹ 😀
Trong code mình đã chú thích rất rõ rồi, ở đây mình chỉ tóm gọn lại nguyên lý hoạt động của nó 1 chút :
1. Tạo 1 nút bấm (để hiển thị popup)
2. Tạo 1 div chứa nội dung popup
3. Hoạt động của js là khi bấm vào nút, tạo 1 div bọc nội dung popup lại, và div này có nền đen, có z-index thật lớn để trồi lên trên cùng, hiển thị nội dung popup
4. Cuối cùng khi bấm ra ngoài thì xóa div đã bọc lúc nãy đi và ẩn nội dung popup lại như cũ

Nếu muốn thêm nút đóng popup cho đẹp thì bạn khai báo thêm css này vào (css này định dạng cho cái nút)

Tiếp theo, chỗ Bước 2 lúc nãy, bạn sửa thành

OK, hoàn thành 😀
Mình giải thích dài dòng vậy thôi chứ code ngắn tũn à, chủ yếu mình hướng dẫn chức năng là chính, nếu popup định dạng có xấu quá thì các bạn chịu khó sửa chút css cho đẹp nhé 😀
Nếu thấy bài viết có ích, share để ủng hộ mình nhé, xin cảm ơn rất nhiều 😀

Leave a comment