• 가이드

텍스트 링크 클릭 시 모달창 띄우기

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

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

1단계, 모달 메뉴 만들기

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

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 를 클릭해 메뉴 관리를 열고, 모달의 오른쪽 ⊕ 아이콘을 클릭합니다.

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

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. 다음 설명을 참조해 코드를 내 사이트에 맞게 수정합니다.

    • 모달ID : 위 2단계에서 복사한 모달ID로 변경합니다.
    • 버튼명 : 버튼 이름을 수정합니다.
    • 배경색과 선 색 : 버튼형 코드를 사용하는 경우 배경색과 선 색을 추가합니다.
      참고 : HEX 또는 RGBA 값을 입력할 수 있습니다. 아임웹 컬러 피커에서도 확인 가능합니다.
    • 버튼 정렬(옵션) : text-align 값을 변경해 텍스트(버튼)를 왼쪽/가운데/오른쪽으로 정렬할 수 있습니다. 디자인 콘셉트에 따라 text-align 값을 left, center, right 중 하나로 수정합니다.
  7. 저장 버튼을 클릭해 적용합니다.

    위 그림은 텍스트형 모달 링크 코드를 적용한 화면입니다.

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

내 사이트에 접속해 링크 클릭 후 모달 창이 정상적으로 열리는지 확인합니다.

목록으로

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

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

리셀러/디자이너 신청

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

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

115.6K

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

297

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

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

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