alert() , 모달, 팝업의 멋진 스타일 버전입니다. 아마도 웹에서 가장 성가시지만 필요한 요소일 것입니다.

이 블로그에서는 React와 CSS를 사용하여 모달을 만들었습니다. 이를 수행하는 방법은 수백만 가지가 있다고 생각하며 개선 사항을 제안할 수 있는 경우 귀하의 피드백을 환영합니다.

the code on GitHub

지도 시간

목차

예비 정크

체크아웃 구성 요소

팝업 구성 요소

스타일스

결론

예비 정크

시작하려면 터미널에 create-react-app를 입력하고 기본 정크를 삭제하고 다음과 같은 파일 구조를 설정했습니다.



데모를 위해 가짜 장바구니 페이지를 설정했습니다.



이 화면에서 작동하는 유일한 것은 "Checkout!"입니다. 단추. 이에 대한 코드는 건너뛰겠지만 here 에서 찾을 수 있습니다.

체크아웃 구성 요소

팝업 데모를 위해 사용자가 구매하는 항목과 기타 항목을 표시하는 CheckOut가 있는 table 구성 요소를 설정했습니다.

팝업 기능에 중요한 것은 다음 코드 줄입니다.

팝업을 켜고 끄기 위해 useState 후크를 설정했습니다.

    // controls if popup displays
    const [popUp, setPopUp] = useState(false)

적용되는 요소에 스타일duringPopUp을 조건부로 추가하는 " during-popup"라는 변수를 설정했습니다. 이 클래스는 해당 요소의 배경색을 어둡게 합니다.

    // adds class to darken background color
    const duringPopUp = popUp ? " during-popup" : ""

저는 이렇게 신청합니다.

    <div className={"Checkout" + duringPopUp}>

마지막으로 PopUp 구성 요소를 조건부로 렌더링하는 코드 라인이 있습니다. 해당 구성 요소는 setPopUp를 소품으로 받습니다. 이렇게 하면 구성 요소 내에서 PopUp를 끌 수 있습니다.

    {popUp && <PopUp setPopUp={setPopUp}/>}

팝업 컴포넌트

PopUp 구성 요소는 다음과 같이 설정됩니다.

import React from 'react';
// styling
import './Checkout.css';
// images
import bone from './bone.png'

const PopUp = props => {
    // function that takes boolean as param to conditionally display popup
    const { setPopUp } = props 

    return (
        <div className="PopUp">
            {/* x close window */}
            <button className="popup-x" onClick={()=> setPopUp(false)} >X</button>
            <div className="pu-content-container">
                <img className="pu-img" src={bone} alt="bone" />
                <h1>Add more bones?</h1>
            </div>
            {/* button controls */}
            <div className="pu-button-container">
                <button onClick={()=> setPopUp(false)}> MORE BONES! </button>
                <button onClick={()=> setPopUp(false)}> No, thank you. </button>
            </div>
        </div>
    );
}

export default PopUp;

PopUp의 내용은 필요한 모든 것이 될 수 있습니다. 구성 요소를 간단히 토글하도록 모든 버튼을 설정했습니다. 실제로 누군가가 더 많은 뼈를 원한다면 MORE BONES! 버튼은 그들에게 더 많은 뼈를 줄 것입니다!

스타일

다시 말하지만 CheckOut.css 파일에 있는 대부분의 스타일은 건너뛰겠습니다. 그들 대부분은 가짜 카트를 설정하고 버튼을 조금 더 멋지게 만듭니다. 다음은 팝업에서 중요한 사항입니다.

Checkout.js에서 배경색을 어둡게 합니다.

.during-popup{
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

이 스타일은 popUp 상태가 참일 때 추가됩니다. 적용할 때마다 배경색을 어둡게 합니다.



PopUp.js의 요소 스타일

다음은 PopUp 컨테이너에서 가장 바깥쪽에 있는 div의 스타일입니다.

.PopUp{
    position: fixed;

    left: 25%;
    top: 30%;

    width: 50%;

    border: 1px solid #011627;
    border-radius: 1em;
    box-shadow: -2px 5px 5px #E71D36;

    background-color: #FDFFFC;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    color: #011627;
}

중요한 부분은 position: fixed; 입니다. 이렇게 하면 화면이 스크롤되는 위치에 관계없이 구성 요소가 top 및 left에 의해 배치된 위치에 렌더링됩니다. 고정되어 있기 때문에 화면이 어떻게 바뀌어도 같은 위치를 유지합니다.

결론

이것이 웹에서 본 것 중 가장 짜증나는 광고를 만드는 데 도움이 되기를 바랍니다. 물론 농담이지만 ​​이것이 팝업 디자인에 도움이 되기를 바랍니다. 피드백을 받고 싶습니다. 댓글을 달거나 [email protected]로 연락해 주십시오. 읽어 주셔서 감사합니다. 최고야, 제이슨.