모달창 띄우기

모달창(Modal Window)

모달창은 페이지 위에 새로운 창을 띄워 콘텐츠를 보여줄 수 있는 기능입니다.  

사용방법

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

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

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


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

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

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

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

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

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

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