** Series thử thách 30Days thực chiến - Day 3** Modal, Popup không còn quá...

Tắt Quảng Cáo [X]

Đăng Nhập để ẩn Tất Cả Quảng Cáo

#j2team_share #j2team_tutorial #j2team_webdev**
Series thử thách 30Days thực chiến - Day 3**

Modal, Popup không còn quá xa lạ với ae. Sử dụng Modal, Popup để đẩy thông tin quảng cáo và thông báo người dùng truyền tải thông điệp ấn tượng hơn. Hãy cùng mình tìm hiểu cơ chế tạo modal popup trong thử thách 3 lần này:

**Youtube:**

**DEMO: ** Vui lòng đăng kí hoặc đăng nhập để thấy liên kết tại BigMMO

**Được sử dụng:** Mục đích của Modal Popup Material UI là thông báo với người dùng, mở form cho người dùng đăng ký, hiển thị banner quảng cáo marketing.

**Chi tiết thành phần và mục đích:**

*Lớp phủ overlay: Làm background thường được tối màu để nhấn mạnh nội dung chính popup *

*Popup: (Có 3 phần: Header, Body, Model Footer)*
* *Header: Thông tin popup*
* *Body: Nội dung chính của popup có thể ảnh hoặc form*
* *Footer: Khu vực action kêu gọi hành động*

**Kiến thức sử dụng:**

Layout, Flex : màu nền sử dụng rgba (kèm độ trong suốt)

Chèn Icon từ Boxicon

Transform: transition

Javascirpt: Dom selector, Gắn Event click để tắt bật popup

**Lưu ý: **Việc gắn sự kiện cả Div cha và Div con sẽ dẫn đến việc ấn click sẽ xảy ra hiện tượng click 1 Div sẽ gọi cả 2 event.
Có thể dùng trick như trong thử thách hoặc sử dụng Event.stopPropagation()

Mỗi ngày sẽ ra một video kèm phân tích về từng thử thách, mọi thắc mắc câu hỏi mọi người comment bên dưới sẽ đc đội nhóm bên mình hỗ trợ luôn nhé.

Note: Mọi người có thể tìm thông tin bài viết dễ dàng theo hashtag dưới đây

(30dayschallengecode_day… mỗi day hashtag sẽ tăng dần từ 1-30 nhé)

#30Dayschallengecode #30dayschallengecode_day3