모달창 띄우기

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

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

PART 1. 모달 메뉴 만들기

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

1단계, 관리자 모드에서 디자인 모드를 접속합니다. 2단계, 왼쪽 윗부분의 ≡ 버튼을 눌러 메뉴 관리를 열고 모달 오른쪽 ⊕ 를 클릭합니다.

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

PART 2. 모달 링크 걸기

버튼 위젯 등에 링크 형식을 모달로 선택하고 위에서 제작한 모달 메뉴를 연결합니다.

1단계, 버튼 위젯을 추가합니다.

참조. 버튼 위젯 외 텍스트, 이미지, 갤러리 등 링크 옵션이 제공되는 위젯이라면 모두 사용 가능합니다.

2단계, 버튼위에 마우스 커서를 놓고 우클릭하여 위젯 설정을 클릭합니다.

3단계, 링크 형식을 모달로 선택합니다.

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

5단계, 버튼 클릭 시 모달 창이 정상적으로 나타나는지 미리보기를 클릭해 확인합니다.

공통점 : 모달창과 팝업창 모두 사이트의 현재 열려있는 페이지를 가리며 그 위에 새로운 창이 더 뜨는 형태입니다.
차이점 - 팝업창은 방문자가 페이지에 도착함과 동시에 자동으로 창이 뜹니다. (단, 사용자의 브라우저 옵션 설정에 따라 팝업창이 열리지 않을 수 있습니다.) - 팝업창은 방문자가 한 번 닫으면 다시 열리지 않도록 설정할 수 있습니다. - 모달창은 방문자가 버튼이나 이미지를 클릭했을 때만 나타납니다. - 모달창은 현재 페이지 위에 나타나므로 다른 페이지로 이동하는 것보다 새로 열리는 창의 내용을 쉽게 접할 수 있고, 닫기 버튼을 누르면 모달창이 닫기므로 다시 원래의 페이지를 둘러보기 쉽습니다.