주의: 이 도움말은 아임웹에서 제공하지 않는 기능을 코드로 해결하는 방법은 안내합니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 아임웹 업데이트에 따라 정상적으로 동작하지 않을 수 있습니다.
링크 클릭 시 페이지 전체를 로드하지 않고 독립적인 창을 띄우는 형식의 모달을 만들 수 있습니다. 이 도움말에서는 코드를 사용해 텍스트 링크 클릭 시 모달 창을 띄우는 방법을 설명합니다.
기본 링크 형식을 사용해 모달창을 띄우려면 다음 모달창 띄우기 도움말을 확인하세요.
참고: 이 도움말의 코드는 텍스트 에디터(게시판, 텍스트 위젯, 상품 요약설명, 상품 상세설명 등)에서 동작하지 않습니다. 또한, 제공되는 소스 코드 및 도움말 외 추가적인 기술 및 고객지원은 제공하지 않습니다.

제작방법
페이지에 띄울 모달 페이지를 제작합니다.
- 디자인 모드에 접속합니다. 접속방법
왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해, 모달 항목의 오른쪽 끝에 위치한 ⊕ 아이콘을 클릭합니다.

- 모달 메뉴명을 입력하고 확인을 누릅니다.
- 빈 모달 메뉴에 위젯을 추가하거나 섹션을 나누어 디자인합니다.
(선택 사항) 모달 메뉴의 메뉴 설정을 열어, 모달 제목, 모달 넓기, 배경색 등 설정을 변경할 수 있습니다. 메뉴 설정 열기

각 모달은 고유의 파라미터 값을 가지고 있습니다. 2단계에서는 이 파타미터 값을 획득하는 방법을 설명합니다.
- 모달 메뉴 디자인을 완료하고, 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
아래의 이미지를 참고하여 브라우저 주소창의 m으로 시작하는 파라미터 값을 확인합니다.

- 파라미터 값을 마우스로 드래그하여 복사(단축키 : Ctrl + C) 후 메모해둡니다.
코드 위젯을 사용해 페이지에 텍스트 링크를 추가하고, 링크 클릭 시 원하는 모달 창이 나타나도록 설정합니다.
참고: 이 기능은 디자인 모드의 페이지에만 추가할 수 있습니다. 게시판의 경우, 코드를 입력해도 텍스트 링크 클릭 시 모달창 띄우기가 동작하지 않습니다.
- 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
- 코드 위젯을 추가합니다.
- 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 컨텍스트 메뉴가 나타나면 코드 설정을 클릭합니다.
아래의 두 가지 코드 중 하나를 복사해 코드 설정에 붙여넣습니다.
1) 텍스트형 모달 링크 코드
<p style="text-align: center;">
<a href="javascript:SITE.openModalMenu('파라미터');">버튼명</a>
</p>
2) 버튼형 모달 링크 코드
<p style="text-align: center;">
<a class="btn" style="background-color: 배경색; border-color: 선 색;" href="javascript:SITE.openModalMenu('파라티터');">버튼명</a>
</p>
아래의 설명을 참고해 코드를 내 사이트에 맞게 수정합니다.
- 버튼 정렬: 필요에 따라 text-align의 center를 변경해 텍스트(버튼)의 정렬을 변경할 수 있습니다. left(왼쪽), center(가운데), right(오른쪽) 중 하나로 수정합니다.
- 파라미터: 위 2단계에서 복사한 파라미터 값으로 변경합니다.
- 버튼명(텍스트): 버튼 이름을 수정합니다.
- 배경색과 선 색: 버튼형 코드를 사용하는 경우 배경색과 선 색을 추가합니다.
참고: HEX 또는 RGBA 값을 입력할 수 있습니다.
저장 버튼을 클릭해 적용합니다. (아래 그림은 텍스트형 모달 링크 코드를 적용한 화면입니다.)

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