고정 위치 지정으로 팝업 설정

우리는 사용자가 시작하는 약간 독특한 팝업을 만드는 방법을 안내하기 위해 왔습니다. 사용자는 버튼을 클릭하여 팝업 애니메이션을 실행하고 양식을 표시합니다. (요구 사항에 따라 언제든지 트리거를 수정할 수 있습니다.)

이 튜토리얼에서 배울 내용은 다음과 같습니다.

1. 고정 모달 구성
2. 프로젝트에 버튼 통합
3. 팝업 트리거 구성
4. 팝업 애니메이션 구성
5. 닫는 애니메이션 구성

고정 모달 구성

콘텐츠에 대한 오버레이를 만들려면 다음 3단계를 따르세요.

1. 팝업 래퍼 개발
2. 양식 요소 포함
3. "닫기" 링크 만들기

팝업 래퍼 개발

삽입하려면 Div 블록 모달의 래퍼로 키보드 단축키를 사용하십시오. ㅏ 액세스하려면 패널 추가 (또는 왼쪽 상단 모서리에 있는 더하기 아이콘을 클릭하고) Div 블록 요소를 프로젝트에 추가하세요.

프로젝트를 보다 효율적으로 구성하려면 Div 블록 Body 요소 상단에 있습니다(필수는 아니지만 이 방법은 요소 구성에 도움이 됩니다). 요소를 항해자 그리고 그 안에 넣으세요. 본문 요소.

선택 Div 블록, "팝업 래퍼"와 같은 클래스 이름을 할당하고 스타일 패널:

• 디스플레이: 플렉스
• Flex 레이아웃: 수직, 중앙, 중앙(양식을 수직으로 중앙에 배치)

스크롤하여 스타일 패널 래퍼가 전체 뷰를 차지하도록 추가 스타일 설정을 구성하려면 다음을 수행하세요.

• 포지션: 고정, 풀
• Z-색인: 9999(프로젝트의 다른 모든 요소 위에 래퍼 배치)

배경색을 적용하여 프로젝트의 나머지 콘텐츠보다 팝업을 돋보이게 만듭니다. #000000 및 80% 불투명도 또는 프로젝트에 적합한 다른 배경색을 실험해보세요.

양식 요소 포함

양식이 포함된 팝업을 표시하려면 다음이 필요합니다. 형태 래퍼 내부의 요소입니다.

래퍼를 선택하고 형태 빠른 찾기 기능을 사용하여:

1. 누르다 명령 + E (Mac의 경우) 또는 컨트롤 + E (PC에서)
2. "양식"을 검색하세요
3. 다음을 선택하세요. 형태 요소를 "팝업 래퍼" 내에 배치합니다(래퍼의 이전 스타일로 인해 형태 센터링을 위해 Flexbox를 활용합니다)
4. 프로젝트에 맞게 양식을 디자인하십시오(예: 최대 너비를 500픽셀로 제한하고 너비를 100%로 설정).

이러한 스타일을 결합하면 양식이 500픽셀(최대 너비) 이내로 제한되는 동시에 다양한 장치 크기(100% 너비)에 걸쳐 반응합니다. Webflow의 반응형 디자인에 대해 자세히 알아보세요.

"닫기" 링크 만들기

다음으로, 사용자가 양식을 제출한 후 팝업을 닫을 수 있는 텍스트 링크를 삽입해 보겠습니다.

이를 달성하려면 텍스트 링크 에서 항해자 "팝업 래퍼" 상단에 추가합니다(다시 한 번 강조하지만 필수는 아니지만 이 방법은 요소 구성에 도움이 됩니다).

링크를 선택한 상태에서 링크에 클래스 이름(예: 팝업 닫기)을 할당하고 일부 스타일을 적용합니다.

• 위치: 절대
• 상단: 5%
• 오른쪽: 5%
• 하단: 자동
• 왼쪽: 자동

이 스타일 세트를 활용하면 닫기 링크를 팝업 래퍼 상단에 유지할 수 있습니다.

이제 팝업에 대한 모든 요소가 생성되었습니다. 계속해서 "팝업 래퍼"의 표시 스타일을 다음으로 변경합니다. 없음 사용하지 않을 때 숨기기 위해.

상호 작용 시 부드러운 페이드인 애니메이션을 만들 수 있도록 준비하는 "팝업 래퍼" 0%의 불투명도를 만듭니다.

프로젝트에 버튼 삽입

프로젝트 설정의 마지막 단계에는 클릭 시 팝업을 트리거하는 버튼과 같은 요소를 추가하는 작업이 포함됩니다. 

버튼을 통합하려면:

1. 누르다 ㅏ 액세스하려면 키보드에서 패널 추가 (또는 디자이너 왼쪽 상단의 + 아이콘을 클릭하세요)
2. 드래그 단추 프로젝트 내의 원하는 위치에 요소

팝업 트리거 구성

프로젝트에 버튼을 추가하면 이제 버튼을 클릭할 때 팝업을 트리거하는 상호 작용을 설정할 수 있습니다.

과거에는 상호 작용에 다양한 도구, 플러그인 및 상당한 코딩 학습 곡선이 필요한 복잡한 JavaScript 라이브러리가 포함되었습니다. Webflow를 사용하면 팝업 상호 작용을 시각적으로 만들 수 있습니다.

시작하려면 캔버스에서 버튼을 선택하세요. 그런 다음 상호 작용 기호를 클릭하면 상호 작용 패널이 표시됩니다.

내 상호 작용 패널에서 + 아이콘을 클릭하여 요소 트리거을 선택한 다음 마우스 클릭 대안.

팝업 애니메이션 설정

Webflow는 몇 가지 사전 설정된 상호 작용을 제공하지만 팝업 공개를 위한 맞춤형 상호 작용을 생성하게 됩니다. 버튼을 클릭하면 팝업이 점차 페이드인됩니다. 이를 달성하려면 – 아래 첫 번째 클릭 시 – 다음을 선택하세요 행동 드롭다운을 선택하고 애니메이션 시작 옵션. 그런 다음 + 아이콘을 눌러 시간 제한 애니메이션을 통합합니다.

이제 애니메이션에 이름(예: 팝업)을 지정한 다음 애니메이션을 적용하려는 요소를 선택할 수 있습니다. 

메모: 상호 작용 패널이 활성화된 동안 요소를 선택해야 합니다.

이 프로젝트의 경우 다음에서 "팝업 래퍼" 요소를 선택합니다. 항해자. 그런 다음 옆에 있는 + 아이콘을 클릭하세요. 행위을 선택한 다음 불투명 (처음에는 불투명도 상태가 설정됩니다).

먼저 타이밍을 고려해 보겠습니다. 패널 하단에 타이밍 표시가 표시됩니다. 활성화하여 시작하세요. 초기 상태로 설정 토글하고 값을 할당합니다. 0%.

다음으로 근처에 있는 + 기호를 선택하세요. 행위, 다음을 선택합니다. 숨기기/보이기 (숨겨진 팝업을 표시하기 위해 – 불투명도는 숨겨진 상태로 유지됩니다). 설정을 확인하세요. 표시하다 ~처럼 몸을 풀다.

마지막 작업을 완료하려면 불투명도를 0%에서 100%로 전환하세요. 이를 실행하려면 옆에 있는 + 기호를 선택하세요. 행위을 선택한 다음 불투명 (100%로 자동 조정됩니다).

마지막으로 완료 버튼을 클릭하고 프로젝트 게시를 진행합니다. 지금 버튼을 클릭하면 팝업이 나타납니다. 하지만 아직 닫을 수는 없습니다. 따라서 "팝업 닫기" 링크에서 상호 작용을 설정하세요.

폐쇄 애니메이션 준비

클로저 상호작용을 구성하려면 먼저 항해자.

그런 다음 링크가 클릭되면 팝업을 닫는 상호 작용을 도입합니다. 

다음과 같이하세요:

1. 다음을 클릭하세요. 상호 작용 아이콘을 공개합니다 상호 작용 패널
2. 다음을 선택하세요. 마우스 클릭 옵션
3. 로부터 행동 드롭다운에서 선택 애니메이션 시작
4. 그런 다음 + 기호를 클릭하여 시간 제한 애니메이션을 추가하세요.
5. 애니메이션에 라벨을 지정하세요(예: 팝업 닫기).
6. 에서 상호 작용 패널에서 '팝업 래퍼' 요소를 강조 표시합니다. 항해자
7. 포함 불투명 옵션 옆에 있는 + 아이콘을 선택하여 행위
8. 불투명도를 0%로 조정합니다.
9. 옆에 있는 + 아이콘을 선택하여 다른 작업을 추가하세요. 행위을 클릭한 다음 숨기기/보이기
10. 선택하다 없음 내 표시하다 환경

마지막으로 완료 버튼을 누른 다음 프로젝트를 다시 게시하여 팝업을 테스트하세요.

위치가 고정된 팝업을 개발하는 데 탁월한 성과를 거두었습니다. 잘하셨어요!