모달을 여는 버튼 생성

데모 경험을 만들고 빈 페이지를 추가한 후 필요에 따라 페이지 변형을 편집할 수 있습니다. 이 데모에서는 버튼과 모달을 생성하고 모달을 여는 버튼을 구성할 수 있습니다.

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 데모 경험을 위해 UI Builder 페이지를 엽니다.

   그림 1. UI 빌더 비쥬얼 에디터

   

2. 스테이지에서 + 아이콘을 클릭하여 도구 상자를 엽니다.
   
3. 단일 열 레이아웃을 선택합니다.
4. 그런 다음 열에서 + 아이콘을 클릭하여 도구 상자를 엽니다.
5. 버튼 구성요소를 선택하여 스테이지에 추가합니다.

   그림 2. 단추 추가

   

   주:

   구성요소를 선택하면 페이지 구성 창에 호환되는 페이지의 구성요소를 자동으로 구성하는 데 사용할 수 있는 몇 가지 사전 설정이 포함됩니다. 그러나 이 연습에서는 구성 요소를 수동으로 구성할 것입니다. 사전 설정에 대한 자세한 내용은 을 참조하십시오 구성요소를 사용하여 페이지 사용자 지정 UI 빌더.
6. Page configuration(페이지 구성) 창에서 Configure the component manually(수동으로 구성 요소 구성)를 선택합니다.
7. 페이지 컨텐츠 창에서 버튼 1 을 선택하고 구성 창에서 버튼 레이블을 모달 열기로 변경합니다.
8. 저장을 선택합니다.
9. 페이지 컨텐츠 창에서 모달 옆의 더하기 아이콘을 클릭하고 경보 모달을 선택합니다.

   그림 3. 경보 모달 추가

   

10. 저장을 선택합니다.
11. Page contents(페이지 콘텐츠) 창에서 Button 1(버튼 1 )을 선택하고 Configuration(구성) 창에서 Events(이벤트 ) 탭을 선택합니다.
12. + 이벤트 처리기 추가를 선택하고, 상속된 이벤트 처리기에서모달 대화 상자 열기 또는 닫기를 선택합니다.

    그림 4. 모달 구성 표시/숨기기

    

13. 모달 열기 대화상자를 활성화하고, 모달 필드에서 경고 1을 선택하고, 추가를 선택합니다.
14. 저장을 선택합니다.
15. 미리 보기를 선택합니다.
16. 미리 보기가 열리면 모달 열기를 선택합니다.
    정의한 모달이 열립니다.

    그림 5. 버튼으로 모달 열기

    

17. 모달에서 확인을 선택한 다음, 브라우저 뒤로 단추를 선택하여 환경 기본 화면으로 돌아갑니다.

다음에 수행할 작업

템플릿을 사용하여 페이지를 만드는 방법을 알아보려면 다음 항목 링크를 선택합니다.