팝업 UI 가이드

팝업은 작업 공간에서 데이터 조회 혹은 특정 작업을 처리하기 위해 사용합니다.

팝업창 내에서 추가로 생성되는 화면 구성은 작업 공간 화면의 영역과 동일합니다.

윈도우 팝업창은 업무 화면과 동일한 처리가 필요한 경우 [저장]과 같은 액션 버튼을 제공하여 사용합니다.

---

팝업 사이즈

윈도우 팝업의 사이즈는 다음 3가지를 지원합니다.

• 최소 사이즈 : 500px* 600px

• 기본 사이즈 : 600px*800px

• 최대 사이즈 : 화면 비율 90%

• 트리팝업 사이즈 : 380px*560px

팝업 내 그리드 사용

1. 팝업에서 조회 조건 입력 후 [조회] 버튼 클릭 시 하단 그리드에 데이터를 나타냅니다.

2. 팝업 그리드 내 스크롤을 지원하며 화면 스크롤은 서치박스를 제외하고 고정 데이터 영역만 스크롤 할수 있도록 합니다.

3. 그리드에서 원하는 데이터 행을 더블 클릭 시 데이터를 부모창에서 보여주고 팝업은 닫힘 처리 됩니다.

4. 그리드에서 원하는 데이터 행을 선택 후 [확인] 버튼을 클릭 시 데이터는 부모창에서 보여주고 팝업은 닫힘 처리 됩니다.

5. [닫기] 버튼을 클릭하면 팝업이 닫힘 처리 됩니다.

팝업의 종류

3가지 유형의 팝업을 제공하고 있습니다.

윈도우 팝업

부모 창에서 호출 된 팝업 중 브라우저 밖에서 새로운 작업 공간이 생성되어 관련 작업을 처리 할 수 있는 팝업입니다. 작업 유형에 따라 Model 또는 Modaless 두 가지로 처리 할 수 있습니다. 사이즈는 최소 300px*500px를 지원하며 최대 사이즈는 화면의 90%를 넘지 않아야 합니다.

모달 팝업

팝업창의 CUD작업과 같이 입력 값이 부모 화면에 영향을 미치는 경우에 사용하며, 팝업 화면 종료 후 부모 화면 제어가 가능한 팝업 유형입니다.

레이어 팝업

레이어 팝업은 단순 정보제공을 위해 사용하는 비 기능성 팝업 유형입니다.