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

주의: 이 도움말은 아임웹에서 제공하지 않는 기능을 코드로 해결하는 방법은 안내합니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 아임웹 업데이트에 따라 정상적으로 동작하지 않을 수 있습니다.

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

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

참고: 이 도움말의 코드는 텍스트 에디터(게시판, 텍스트 위젯, 상품 요약설명, 상품 상세설명 등)에서 동작하지 않습니다. 또한, 제공되는 소스 코드 및 도움말 외 추가적인 기술 및 고객지원은 제공하지 않습니다.

제작방법

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

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

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

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

  1. 모달 메뉴 디자인을 완료하고, 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 아래의 이미지를 참고하여 브라우저 주소창의 m으로 시작하는 파라미터 값을 확인합니다.

  3. 파라미터 값을 마우스로 드래그하여 복사(단축키 : Ctrl + C) 후 메모해둡니다.

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

참고: 이 기능은 디자인 모드의 페이지에만 추가할 수 있습니다. 게시판의 경우, 코드를 입력해도 텍스트 링크 클릭 시 모달창 띄우기가 동작하지 않습니다.
  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 class="btn" style="background-color: 배경색; border-color: 선 색;" href="javascript:SITE.openModalMenu('파라티터');">버튼명</a>
    </p>
  6. 아래의 설명을 참고해 코드를 내 사이트에 맞게 수정합니다.

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

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