이 섹션은 화면의 모든 다른 요소 위에 떠다니는 그룹인 팝업(Container type Popup)에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
Popup 그룹 유형은 다른 모든 요소 위에 표시되는 그룹으로, 페이지의 스크롤 위치와 상관없이 화면 중앙에 정렬됩니다. 페이지 아래를 숨기거나 흐리게 만들도록 설정할 수 있어 사용자의 주의를 즉시 끌기에 유용합니다.
팝업의 전형적인 사용 사례에는 다음이 포함됩니다.
•
오류 메시지 및 경고
•
등록 양식
•
문의/피드백 양식
•
뉴스레터 가입 양식
•
프로모션 제안 및 할인
Showing and hiding popups
팝업은 기본적으로 보이지 않으며 조건을 사용하여 표시할 수 없습니다. 이런 측면에서 다른 그룹들과 약간 다릅니다.
팝업을 표시하는 데에는 두 가지 동작을 사용할 수 있습니다.
1.
팝업을 표시하려면 '요소 표시' 동작을 사용할 수 있습니다. Bubble은 그룹이 표시되거나 숨겨질 때 약간의 페이드 애니메이션을 자동으로 적용합니다.
2.
두 번째 옵션은 '요소 애니메이션' 동작을 사용하여 팝업을 표시하는 데에 사용할 애니메이션을 선택하는 것입니다.
Custom events for popups
워크플로우는 이벤트와 일련의 동작으로 구성됩니다. 이벤트는 동작의 집합이 언제 실행되어야 하는지를 결정하는 데 사용됩니다.
페이지에 팝업을 추가하면 워크플로우를 트리거하는 데 사용할 수 있는 두 가지 이벤트가 추가됩니다.
•
'팝업이 닫힐 때'는 Hide an element 또는 Animate an element 동작을 사용하여 특정 팝업이 닫힐 때마다 트리거됩니다.
•
'팝업이 열릴 때'는 Show an element 또는 Animate an element 동작을 사용하여 특정 팝업이 열릴 때마다 트리거됩니다.
Popups and security
이러한 이벤트는 팝업이 열리거나 닫일 때마다 트리거되며(첫 번째 트리거만이 아닌), 팝업이 닫힌 후에 팝업의 내용을 재설정하는 등의 일반적인 시나리오에서 유용합니다.
Other ways to learn
Core reference: popup settings
Video lessons
