• 가이드

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

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

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

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

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 class="btn" style="background-color: 배경색; border-color: 선 색;" href="javascript:SITE.openModalMenu('파라티터');">버튼명</a>
    </p>
  6. 다음 설명을 참조해 코드를 내 사이트에 맞게 수정합니다.

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

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

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

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

218.7K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

315

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

2.6K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.