|
속성
|
JavaScript
|
유형
|
설명
|
|
유형
|
type
|
string
|
다음을 포함하려는 팝업의 유형을 선택합니다.
• 부동 팝업
• 모달
|
|
가운데 맞춤
|
centered
|
boolean
|
이 확인란을 선택하면 팝업이 화면의 가로 및 세로 중앙에 배치됩니다. 이 확인란을 선택하지 않으면 다음과 같은 추가 속성이 표시됩니다.
• 위쪽(px, %, em, vh)
• 아래쪽(px, %, em, vh)
• 왼쪽(px, %, em, vh)
• 오른쪽(px, %, em, vh)
|
|
위쪽(px, %, em, vh)
|
top
|
string
|
요소의 HTML style 속성을 설정하고 고정된 위쪽을 단위로 설정할 수 있습니다(px, %, vw, vh 등).
|
|
아래쪽(px, %, em, vh)
|
bottom
|
string
|
요소의 HTML style 속성을 설정하고 고정된 아래쪽을 단위로 설정할 수 있습니다(px, %, vw, vh 등).
|
|
왼쪽(px, %, em, vh)
|
left
|
string
|
요소의 HTML style 속성을 설정하고 고정된 왼쪽을 단위로 설정할 수 있습니다(px, %, vw, vh 등).
|
|
오른쪽(px, %, em, vh)
|
right
|
string
|
요소의 HTML style 속성을 설정하고 고정된 오른쪽을 단위로 설정할 수 있습니다(px, %, vw, vh 등).
|
|
서비스
|
JavaScript
|
설명
|
|
팝업 숨기기
|
hidepopup
|
팝업을 숨기는 바인딩 가능 서비스입니다.
|
|
팝업 표시
|
showpopup
|
팝업을 표시하는 바인딩 가능 서비스입니다.
|
|
사용에 필요한 최소 단계
|
작동 장면
|
||||
1. 팝업 위젯을 캔버스로 끌어서 놓습니다.
2. 표시하려는 위젯을 팝업으로 끌어서 놓습니다.
3. 클릭 이벤트가 포함된 위젯(예: 레이블 또는 버튼)을 팝업에 추가하여 팝업을 닫는 방법을 지정합니다. 해당 위젯의 클릭 이벤트를 팝업 위젯에 바인딩하고 바인딩 대상 선택 창에서 팝업 숨기기를 선택합니다.
|
 |
 |
다른 클래스 또는 기본 제공(OOTB) 속성과 충돌하지 않도록 클래스에 고유한 이름을 지정하는 것이 좋습니다.
|
|
CSS 예제
|
작동 장면
|
|
.ptc-popup {
border-width: 1px; border-style: solid; border-color: black; font-size: 16px; font-family: Century Gothic; color: black; } |
 |
