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