Giao diện popup component

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

5.0 (1 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 15:01 17-11-2019 1.648 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

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:

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="/redirect?Id=dVCb2MDMzngo%2bdEH198XyBvYCSS8ocbW%2fd%2fnYLfBEL0%3d" 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="/redirect?Id=Ok7QNCdcSHCUf3tyR7o94w%3d%3d" class="btn btn--blue">Enroll now</a>
            </div>
        </div>
    </div>

(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%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color-black, .8);
    z-index: 9999;
}

(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{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

 &__content{
        @include absCenter;
        width: 75%;
    }

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

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

Tiếp đến thì ta sẽ phải chia diện tích cho phần popup__leftpopup__right (ta set popup__img hiển thị display: block và có width là 100%)

    &__left{
         width: 33.333333%;
    } 

    &__right{
         width: 66.666667%;
    }

C

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%;
    }

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;
    }

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;
    }

Ở đâ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;
            position: absolute;
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
        }
    }

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 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%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color-black, .8);
    z-index: 9999;

    &__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;
            position: absolute;
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
        }
    }
}

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

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.

Nội dung bài viết

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

LANDING PAGE WEBSITE SELFTAUGHT 2019

Đánh giá

Phạm Tấn Thành Moderator đã đánh giá 11:49 11-11-2019

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.