Tạo popup đăng nhập, đăng ký với HTML, CSS, và JS

0
227

Việc tạo popup đăng nhập & đăng ký giúp website của bạn trở lên đẹp và hoàn hảo hơn trong mắt người sử dụng. Hơn hết, việc tạo form đăng nhập popup lên sẽ không làm gián đoạn trải nghiệm người dùng, người dùng không cần đợi website tải trang đăng nhập. Bài viết này sẽ hướng dẫn bạn tạo popup đăng nhập và đăng ký đẹp mê ly chỉ trong ít phút.

Bài viết này mình sẽ hướng dẫn bạn cách tạo ra một form đăng nhập & đăng ký trên cửa sổ popup và làm mờ nền xung quanh giống như ảnh dưới đây. Bạn có thể xem demo hoàn thiện ở phía cuối bài viết này.

Hướng dẫn tạo popup đăng nhập và đăng ký cực đẹp chỉ trong 10 phút
Hướng dẫn tạo popup đăng nhập và đăng ký cực đẹp chỉ trong 10 phút

Cách tạo popup đăng nhập

Ý tưởng bài toán

  • Khi người dùng truy cập website, sẽ có 2 menu Đăng nhập và Đăng ký ở góc trên cùng bên trái. Khi người dùng click vào 1 trong 2 button đó thì popup sẽ hiện lên tương ứng với button mà người dùng click.
  • Chúng ta sẽ tạo popup đăng nhập và đăng ký trên cùng 1 cửa sổ. Việc này giúp cho người dùng có thể dễ dàng chuyển qua lại nếu trong trường hợp chưa hoặc đã có tài khoản.
  • Form popup đăng nhập sẽ có giao diện cho chức năng Ghi nhớ mật khẩu & Quên mật khẩu
  • Form popup đăng ký sẽ có giao diện cho chức năng điền các thông tin tài khoản, mật khẩu có thể ẩn/hiện, chấp nhận điều khoản.
  • Form popup quên mật khẩu có giao diện cho chức năng người dùng điền email để lấy lại mất khẩu.
  • Người dùng nhấn ESC trên bàn phím hoặc click vào vị trí bất kỳ bên ngoài form popup đăng nhập & đăng ký sẽ đóng cửa sổ popup lại.
  • Báo lỗi chi tiết trong trường hợp người dùng nhập sai hoặc thiếu thông tin cần thiết.

Ý tưởng triển khai

  1. Tạo trang web demo, có 2 button đăng nhập và đăng ký
  2. Tạo form có 2 tab đăng nhập & đăng ký ở trên, tạo event cho sự kiện đổi form.
  3. Tạo event click button và mở tab poup đăng nhập hoặc đăng ký tương ứng
  4. Tạo event cho 1 số animation trên popup form
  5. Kiểm tra form hợp lệ

Tạo popup đăng nhập & đăng ký

Code HTML

Code CSS

Lưu ý:

Phần CSS này sử dụng CSS3 để có các hiệu ứng thay vì phải dùng Javascript


Code Javascript

Chúng ta sẽ sử dụng 2 thư viện Javascript jQuery và modernizr để việc code trở nên đơn giản hơn.

Lưu ý:

Phần code kiểm tra hợp lệ mình chỉ demo 1 trường Email trong tab Đăng nhập, bạn có thể tự hoàn thiện nốt nhé.

- Bài viết liên quan dành cho bạn -


Full demo tạo popup đăng nhập

 

Subscribe
Notify of
guest
0 Bình luận
Inline Feedbacks
View all comments