Giao diện popup component
Lập trình CSS và SASS nâng cao với dự án website Landing Page

Danh sách bài học
Giao diện popup component
Nội dung bài viết Học nhanh
Dẫn nhập
Ở bài trước chúng ta đã cùng nhau Code xong phần Footer.
Trong bài học này chúng ta sẽ cùng nhau code phần Popup Component.
Nội dung
Để tiếp thu tốt bài học này các bạn cần:
- Có kiến thức cơ bản về CSS và SASS
- Đã xem qua các bài trước trong khóa LẬP TRÌNH CSS & SASS NÂNG CAO VỚI DỰ ÁN WEBSITE LANDING PAGE
- Đã xem qua bài CODE FOOTER SECTION.
Và trong bài học này chúng ta sẽ cùng nhau code:
- Code html cho phần popup.
- Code CSS cho popup component
Code html cho phần popup
Như các phần trước thì chúng ta sẽ xem sản phẩm cuối cùng của phần này:
Ta có thể thấy popup chiếm toàn bộ màn hình với nền đen transparent, ở giữa là 1 element (.popup__content). Và trong phần này ta tiếp tục chia popup__content làm 2 phần. Phần bên tay trái là có 2 ảnh (popup__left chứa 2 popup__img), phần bên tay phải (.popup__right) có chứa nội dung gồm 3 phần. Phần 1 là popup title ta sẽ sử dụng .heading__secondary và 1 tiêu đề phụ ta sử dụng .heading__tertiary và nút đóng màn hình (.popup__close). Phần 2 là nội dung paragraph mô tả (.popup__text) và phần cuối chính là button sử dụng .btn--blue.
(Phần này ta sẽ nhét code html xuống ngay dưới phần footer )
Code CSS cho Popup
Trước hết ta sẽ tạo ra file _popup.scss trong phần components, và import nó vào trong main.scss
Tiếp đến ta sẽ code để cho popup hiển thị toàn màn hình với background color là màu đen transparent và position absolute để nó và z-index thật lớn để chắc rằng khi hiển thị, nó luôn chèn đè lên tất cả những thứ còn lại.
(ta tạm thời để .popup__img bé lại để mình có thể dễ dàng minh họa)
Tiếp ta sẽ chình phần popup content. Ở đây đầu tiên là set width cho popup__content và chỉnh sao cho nó hiển thị ở giữa. Do có thẻ sẽ dùng nhiều nên mình để code chỉnh vị trí ở giữa sáng _mixins.scss
Và ta chỉ cần sử dụng nó lại trong _popup.scss
ta chỉnh thêm cho nó về background-color, height, và border-radius
Tiếp đến thì ta sẽ phải chia diện tích cho phần popup__left và popup__right (ta set popup__img hiển thị display: block và có width là 100%)
Cách chúng ta nghĩ để 2 phần này hiển thị trên cùng 1 dòng là sử dụng float left, nhưng khi đó thì chiều cao của 2 phần sẽ không bằng nhau (bên trái chiếm toàn bộ chiều cao, còn bên phải chỉ chiếm vừa đủ để chứa text)
Nó sẽ khiến chúng ta khó căn chỉnh vị trí cho phần text, nên ở phần này mình sẽ giới thiệu cho các bạn 1 mẹo để căn chỉnh đó là sử dụng display: table-cell, nó sẽ giúp element hiển thị như 1 cột trong table (các cột sẽ hiển thị trên cùng 1 hàng, và có cùng chiều cao)
Bây giờ thì nó đã hiển thị trên cùng 1 hàng và cùng 1 chiều cao, ta sử dụng vertical-align: middle để căn dọc phần text bên phải.
Tiếp tục chúng ta sẽ chỉnh đến popup__text
Ở đây là có 1 số thuộc tính mới, column-count chính là số cột được chia, column-gap là khoảng cách giữa các cột, column-rule là vạch ngăn cách giữa các cột, còn hyphens dùng để khi có chữ quá dài mà chữ đó phải xuống dòng thì sẽ có gạch nối giữa 2 phần của dòng đó.
(cách bạn có thể chỉnh giá trị của các thuộc tính để hiểu rõ hơn nhé!)
Tiếp đến chúng ta sẽ chỉnh nốt phần popup__close.
Phần này khá đơn giản chúng ta chỉ cần set position cho nó và chỉnh vị trí sao cho phù hợp.
Còn 1 vấn đề là mặc dù ta đã để border radius, nhưng do ảnh tràn ra ngoài mà border top left và bottom left vẫn là góc vuông. ta chỉ cần đơn giản set over-flow cho content là hidden là xong :D
Vậy là chúng ta đã code xong phần CSS giao diện cho Popup component rồi nè.
Code CSS
Kết luận
Ở bài này chúng ta đã code xong giao diện cho phần Popup
Ở trong bài sau chúng ta sẽ hoàn thành hiệu ứng khi click vào button phần courses section thì popup mới hiện lên và hiệu ứng đóng popup.
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó."
Tải xuống
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Giao diện popup component dưới dạng file PDF trong link bên dưới.
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận
Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.
Tác giả/Dịch giả
Khóa học
Lập trình CSS và SASS nâng cao với dự án website Landing Page
Qua khóa FRONT END CƠ BẢN , Kteam đã hướng dẫn các bạn đã có được những kiến thức cơ bản về HTML và CSS.
Trong combo Front End 2019, chúng ta sẽ cùng nhau tìm hiểu và áp dụng những kiến thức chuyên sâu về CSS. Do kiến thức về CSS trong khóa học khá lớn và chi tiết nên Kteam đã chia làm 2 phần.
- Phần 1: CSS và SASS Nâng Cao
- Phần 2: Flexbox và CSS grid layouts
Ở khóa học này chúng ta sẽ cũng nhau tìm hiểu tổng quát về phần 1: CSS và SASS Nâng Cao với dự án Website Landing Page.
Bạn cũng có thể truy cập vào đường link bên dưới để xem bản PRIEVIEW của website landing page Selftaught 2019 mà chúng ta sẽ cùng thực hiện nhé!