• 가이드

모달창 띄우기

모달 기능을 활용해 페이지 위에 새로운 창을 띄워 콘텐츠를 보여줄 수 있습니다. 별도의 페이지 로드 없이 제품의 상세 스펙을 보여주거나, 목록을 보여줄 때 유용합니다.

모달은 일반 팝업 창과 다르게 방문자가 버튼 또는 링크를 클릭했을 때만 동작합니다. 모달은 여러 위젯을 사용해 꾸밀 수 있지만 게시판, 캘린더, 지도 게시판, 쇼핑과 같은 일부 DB 위젯은 사용할 수 없습니다.

설정방법

모달 기능을 활용하려면 앞서 띄울 모달 페이지를 만들어야 합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 메뉴 관리 ≡ 를 열고 모달 오른쪽 끝의 ⊕를 클릭합니다.

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

버튼 위젯 등에 모달 창이 열리도록 링크를 걸어주는 과정입니다.

  1. 페이지에 버튼 위젯을 추가합니다. 위젯 추가방법

    참고: 버튼 위젯 외 텍스트, 이미지, 갤러리 등 링크 옵션을 제공하는 위젯이라면 모두 사용 가능합니다. 일반 텍스트에 모달 링크를 삽입하려면 이 도움말 하단의 관련 도움말을 참고하세요.
  2. 추가한 버튼 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 컨텍스트 메뉴가 나오면 버튼 설정을 클릭합니다.
  3. 링크 방식으로 모달을 선택합니다.

  4. 위 1단계에서 제작한 모달 메뉴를 연결합니다.

  5. 버튼 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 버튼을 클릭했을 때, 디자인한 모달이 정상적으로 표시되는지 확인합니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

관련 도움말: 텍스트에 모달 링크를 추가하려면?

특정 텍스트의 링크를 삽입하고, 링크 클릭 시 모달이 나오도록 설정하려면 다음 도움말에서 확인해 주세요.

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

목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

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

아임웹에서 당신의 생각을 표현해보세요.
538.4K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
2.9K
전국 파트너/리셀러 수

아임웹 공식제휴사

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