Guides

팝업 만들기

☝🏻
사용자에게 메세지를 표시할 수 있는 팝업을 제작합니다.
1️⃣
팝업창 생성하기
  • 앱을 하나 생성해 주세요.
  • Popup을 선택해 팝업창을 생성해 주세요.
  • 팝업창은 기본적으로 [숨김 상태]이기 때문에 미리보기를 해도 팝업이 보이지 않습니다.
2️⃣
팝업창 열기 버튼 생성하기
  • 버튼을 하나 생성하고 선택한후 우측 "로직" 탭으로 이동해 주세요.
  • "로직 추가"를 선택해 아래와 같은 로직을 추가해 주세요.
    • "Condition 추가" 버튼을 눌러 추가한 후 "클릭시" 를 선택해 주세요
    • "Result 추가" 버튼을 눌러 추가한 후 "엘리먼트 함수 실행" 을 선택해 주세요
      • 두번째 셀렉트에서 이미 생성한 AppPopup 을 선택해 주세요
      • 세번째 셀렉트에서 "보기" 를 선택해 주세요
  • "미리보기" 를 통해 확인해 보세요. 버튼을 클릭하면 팝업창이 나타납니다.
3️⃣
팝업창 닫기 버튼 설정하기(옵션)
  • 팝업 생성시 기본적으로 X 버튼이 있습니다.
  • X 버튼을 선택하고 우측 "로직" 탭으로 이동합니다.
  • 이미 기본적으로 X 버튼 클릭시 숨기기 로직이 설정 되어 있습니다.
  • 버튼을 새로 만들고 해당 로직을 동일하게 적용하면 나만의 닫기 버튼을 설정 하실 수 있습니다.
4️⃣
팝업창에 내용 넣기
  • 팝업창에 내용을 넣을때에는 팝업창의 자식 엘리먼트로 설정 하셔야 합니다. 2가지 방법중 하나로 넣어주세요.
    1. 엘리먼트를 생성시 클릭하지 말고 마우스를 클릭한채로 드래그 하여 팝업창 위에 놓습니다.
    2. 엘리먼트 트리에서 엘리먼트를 이동하여 팝업의 자식 요소로 설정합니다.
🧐
팝업이 계속 보여서 수정시 불편하다면
  • 팝업을 클릭하고 왼쪽 엘리먼트 트리 에서 팝업위에 마우스를 이동 시킵니다.
  • 마우스 오버시 보이는 보기 옵션 (👁) 을 클릭하여 숨기거나 다시 보이게 설정할 수 있습니다.