텍스트 링크 클릭 시 모달창 띄우기 (코드)

링크 클릭 시 페이지 전체를 로드하지 않고 독립적인 창을 띄우는 형식의 모달을 만들 수 있습니다. 이 도움말에서는 코드를 사용해 텍스트 링크 클릭 시 모달 창을 띄우는 방법을 설명합니다.

기본 링크 형식을 사용해 모달창을 띄우려면 다음 모달창 띄우기 도움말을 확인하세요.

1단계: 모달 메뉴 만들기

페이지에 띄울 모달 페이지를 제작합니다.

1. 디자인 모드에 접속합니다.
2. 왼쪽 윗부분 메뉴 관리를 클릭해 메뉴 관리 창을 열고, 맨 아래 부분 모달의 오른쪽 ⊕ 아이콘을 클릭합니다.
   
3. 모달 메뉴명을 입력하고 확인을 누릅니다.
4. 빈 모달 메뉴에 위젯을 추가하거나 섹션을 나누어 디자인합니다.
5. (선택 사항) 모달 메뉴의 메뉴 설정을 열어, 모달 제목, 모달 넓기, 배경색 등 설정을 변경할 수 있습니다. 

   

2단계: 모달 파타미터값 확인/복사하기

각 모달은 고유의  파라미터 값을 가지고 있습니다. 2단계에서는 이 파타미터 값을 획득하는 방법을 설명합니다.

1. 모달 메뉴 디자인을 완료하고, 디자인 모드 오른쪽 상단 미리보기를 클릭합니다.
2. 다음 이미지를 참조하여, 브라우저 주소창의 m으로 시작하는 파라미터 값을 확인합니다.
3. 파라미터 값을 마우스로 드래그하여 복사(단축키 : Ctrl + C) 후 메모해둡니다.

3단계: 링크 삽입 및 수정하기

코드 위젯을 사용해 페이지에 텍스트 링크를 추가하고, 링크 클릭 시 원하는 모달 창이 나타나도록 설정합니다.

1. 왼쪽 윗부분의 위젯 추가를 클릭합니다.
2. 코드 위젯을 추가합니다.
3. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 보조 메뉴가 나타나면 코드 설정을 클릭합니다.
5. 다음 두 가지 코드 중 하나를 복사해 코드 설정에 붙여넣습니다.
   
   1) 텍스트형 모달 링크 코드
   

   <p style="text-align: center;">   <a href="javascript:SITE.openModalMenu('파라티터');">버튼명</a> </p>
   	

   2) 버튼형 모달 링크 코드
   

   <p style="text-align: center;">   <a style="background-color: 배경색; border-color: 선 색;" href="javascript:SITE.openModalMenu('파라티터');">버튼명</a> </p>
   	

6. 다음 설명을 참조해 코드를 내 사이트에 맞게 수정합니다.
   
   • 버튼 정렬: 필요에 따라 text-align의 center를 변경해 텍스트(버튼)의 정렬을 변경할 수 있습니다. left(왼쪽), center(가운데), right(오른쪽) 중 하나로 수정합니다.
   • 파라미터: 위 2단계에서 복사한 파라미터 값으로 변경합니다.
   • 버튼명(텍스트): 버튼 이름을 수정합니다.
   • 배경색과 선 색: 버튼형 코드를 사용하는 경우 배경색과 선 색을 추가합니다.
     참고: HEX 또는 RGBA 값을 입력할 수 있습니다.
7. 저장 버튼을 클릭해 적용합니다. (아래 그림은 텍스트형 모달 링크 코드를 적용한 화면입니다.)

   

4단계: 링크 작동여부 확인하기

1. 디자인 모드 오른쪽 윗부분 미리보기 아이콘을 클릭합니다. 
2. 모달 창이 정상적으로 열리는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.