Giao diện popup component

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. 

        <div class="popup__content">
            <div class="popup__left">
                <img src="img/popup1.jpg" alt="Tour photo" class="popup__img">
                <img src="img/popup2.jpg" alt="Tour photo" class="popup__img">
            </div>
            <div class="popup__right">
                <a href="#section-courses" class="popup__close">&times;</a>
                <h2 class="heading-secondary u-margin-bottom-small">Enroll now</h2>
                <h3 class="heading-tertiary u-margin-bottom-small">Important &ndash; Please read these terms before booking.</h3>
                <p class="popup__text">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse, ratione dolorum? 
                    Dicta quam voluptas ipsum obcaecati laborum mollitia distinctio. Earum quisquam 
                    esse est vel aperiam quis quidem commodi voluptatem voluptatum! Magnam quod quis 
                    sed fugiat quas. At vel dolorem, officia, rerum tenetur aspernatur, itaque maiores laudantium voluptas 
                    assumenda reiciendis nemo!
                </p>
                <a href="#" class="btn btn--blue">Enroll now</a>
            </div>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

(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.

.popup{
    height: 100vh;
    width: 100%;
    
    top: 0;
    left: 0;
    background-color: rgba($color-black, .8);
    
}
1
2
3
4
5
6
7
8
9
10

(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

@mixin absCenter{
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7

Và ta chỉ cần sử dụng nó lại trong _popup.scss

 &__content{
        @include absCenter;
        width: 75%;
    }
1
2
3
4
5

ta chỉnh thêm cho nó về background-color, height, và border-radius

background-color: $color-white;
border-radius: 3rem;
1
2
3

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%)

    &__left{
         width: 33.333333%;
    } 

    &__right{
         width: 66.666667%;
    }
1
2
3
4
5
6
7
8

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)  

&__left {
        width: 33.333333%;
        display: table-cell;
    }

    &__right {
        width: 66.666667%;
    }
1
2
3
4
5
6
7
8
9

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.

  &__right {
        width: 66.666667%;
        display: table-cell;
        vertical-align: middle;
        padding: 3rem 5rem;
    }
1
2
3
4
5
6
7

Tiếp tục chúng ta sẽ chỉnh đến popup__text 

&__text {
        font-size: 1.8rem;
        margin-bottom: 4rem;

        column-count: 2;
        column-gap: 4rem;
        column-rule: 1px solid $color-grey;

        hyphens: auto;
    }
1
2
3
4
5
6
7
8
9
10
11

Ở đâ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. 

 &__close {

        &:link,
        &:visited {
            color: $color-grey-dark-1;
            
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

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

.popup {
    height: 100vh;
    width: 100%;
    
    top: 0;
    left: 0;
    background-color: rgba($color-black, .8);
    

    &__img {
        display: block;
        width: 100%;
    }

    &__content {
        @include absCenter;
        width: 75%;
        background-color: $color-white;
        border-radius: 3rem;
        display: table;
        overflow: hidden
    }

    &__left {
        width: 33.333333%;
        display: table-cell;
    }

    &__right {
        width: 66.666667%;
        display: table-cell;
        vertical-align: middle;
        padding: 3rem 5rem;
    }

    &__text {
        font-size: 1.8rem;
        margin-bottom: 4rem;

        column-count: 2;
        column-gap: 4rem;
        column-rule: 1px solid $color-grey;

        hyphens: auto;
    }

    &__close {

        &:link,
        &:visited {
            color: $color-grey-dark-1;
            
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

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é!

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!

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ÌNH LUẬ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.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK