에서 모달 생성 UI 빌더
구성요소와 함께 모달 UI 빌더 을 사용하여 사용자에 대한 경보 또는 작업 호출을 제공합니다. UI 빌더 는 시간과 노력을 절약하기 위해 모달과 함께 제공됩니다.
모달이란?
대화 상자라고도 하는 모달은 다른 콘텐츠 창을 오버레이하는 창입니다. 모달은 사용자 경험을 제어합니다. 사용자는 모달이 닫힐 때까지 오버레이된 창과 상호작용할 수 없습니다. 모달에는 다음과 같은 다양한 유형의 컨텐츠가 포함될 수 있습니다.
- 정적 텍스트
- 동적 텍스트
- 양식
- 이미지
- 단추
UI 빌더 에는 미리 구성된 모달을 사용할 수 있습니다. 구성요소에 모달을 추가할 수 있습니다. 그런 다음 모달의 내용과 화면에 표시되는 방식을 구성합니다. 사용자가 선택할 때 작업을 수행하도록 이벤트 핸들러를 모달에 추가합니다. 이 작업은 사용자에게 무언가를 경고하거나 사용자에게 작업을 확인하도록 요청할 수 있습니다. 모달은 사용자가 무슨 일이 일어나고 있는지 알 수 있도록 하는 방법입니다. 예를 들어, 모달은 기본 페이지에서 수행 중인 작업을 계속하기 전에 선택 항목을 확인하도록 사용자에게 요청할 수 있습니다.
모달 세부 구조
의 UI 빌더 모달은 다음을 가질 수 있습니다.
- 모달 헤더
- 모달 컨텐츠
- 대화 상자 닫기 버튼(모달에서 수행한 작업 없음)
- 하나 이상의 모달 버튼(모달에서 작업을 수행할 수 있음)
모달 유형
다음 표와 같이 에서 다양한 유형의 모달을 사용할 수 있습니다 UI 빌더.
| 모달 유형 | 설명 |
|---|---|
| 경보 | 경보 모달은 구성요소 작업과 관련된 정보를 제공합니다. 예를 들어 사용자가 삭제 버튼을 누르면 삭제 동작을 실행 취소할 수 없음을 사용자에게 알리는 경고 팝업을 표시할 수 있습니다. |
| 확인 | 확인 모달은 사용자에게 구성요소 작업을 확인하도록 요청합니다. 예를 들어 사용자가 삭제 버튼을 누르면 데이터 삭제를 확인해야 합니다. 기본 및 보조 버튼 레이블 필드에서 예/취소와 같은 확인 옵션을 선택할 수 있습니다. |
| 확인 및 삭제 | 확인 및 삭제 모달은 일반적으로 콘텐츠 삭제 또는 지우기와 관련된 보다 지시문적입니다. 이를 통해 사용자는 작업의 심각성을 알 수 있으며 작업을 계속 진행할지 여부를 묻습니다. |
| 사용자 지정 | 사용자 지정 모달은 표준 모달을 사용하여 처리되지 않는 시나리오를 처리합니다. 사용자 지정 모달은 모달의 컨테이너 구성 요소로 생각할 수 있습니다. 페이지에서와 마찬가지로 사용자 지정 레이아웃, 구성요소, 이벤트 및 데이터 자원을 추가할 수 있습니다. 사용자 지정 모달은 레이아웃을 사용하여 모달에서 원하는 정보를 완전히 디자인할 수 있도록 합니다. 레이아웃은 또한 모달 화면 내에 정보가 있는 위치를 결정합니다. CSS 스타일시트 스타일을 사용하여 모달의 시각적 모양을 변경할 수 있습니다. |
| iframe | iframe을 사용하여 URL 및 데이터에서 기존 iframe 콘텐츠에서 모달로 콘텐츠를 가져옵니다. |
| 모달 뷰포트 | 클라이언트 스크립트를 사용하여 이벤트 바인딩을 통해 뷰포트 모달에 컨텐츠를 동적으로 전달합니다. |
이벤트 핸들러 및 모달
모달에 이벤트를 노출하여 작업 호출 이벤트를 처리합니다. 예를 들어 기본 작업, 보조 작업 등이 있습니다. 이벤트 핸들러를 추가하고 데이터 자원을 호출하여 데이터를 구성합니다. 모달이 있는 구성 요소에 대해 새 이벤트 핸들러를 추가하는 것만큼 간단합니다. 또는 모달 자체에 이벤트 핸들러를 추가할 수 있습니다. 구성요소 또는 모달과 연결할 이벤트를 선택하고 추가합니다. 자세한 지침은 을 참조하십시오 구성요소에 모달 추가 .