모달을 여는 버튼 생성

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

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

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

   그림 1. UI 빌더 시각적 편집기

   

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

   그림 2. 버튼 추가

   

   주:

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

    그림 3. 경보 모달 추가

    

11. 저장을 선택합니다.
12. 페이지 콘텐츠 창에서 버튼 1 을 선택하고, 구성 창에서 이벤트 탭을 선택합니다.
13. + 이벤트 핸들러 추가를 선택하고 상속된 이벤트 핸들러에서모달 대화 상자 열기 또는 닫기를 선택합니다.

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

    

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

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

    

18. 모달에서 확인을 선택한 다음, 브라우저 뒤로 버튼을 선택하여 경험 메인 화면으로 돌아갑니다.

다음에 수행할 작업

다음 주제 링크를 선택하여 템플릿을 사용하여 페이지를 만드는 방법을 알아봅니다.