UIModalWindow

Modal Window

특정 콘텐츠에만 집중하고 다른 작업은 진행할 수 없을 때 사용하는 위젯이다. 모달창을 표시하면 다음과 같은 화면을 볼 수 있다.

Basics

모달창을 표시하기 위한 앵커 요소는 클래스 속성에 modalAnchor 클래스 이름을 반드시 포함해야 한다. 또한 모달창으로 사용할 div 요소는 클래스 속성에 modal 클래스를 반드시 포함해야 한다.

또한 모달 앵커 요소의 href 속성은 모달 콘텐츠 div 요소의 아이디를 가리켜야 한다. 예를 들어 콘텐츠 요소의 아이디가 modalWindow라면 앵커 요소는 다음과 같이 작성할 수 있다.

<a href="#modalWindow" class="modalAnchor">모달창 열기</a>

모달창은 한 개의 자식 요소를 포함하는데, 자식 요소는 fg 클래스 이름을 반드시 포함해야 한다. 가장 간단한 형태의 모달창 HTML 마크업은 다음과 같이 작성할 수 있다.

<a href="#modalWindow" class="modalAnchor">모달창 열기</a>
<div id="modalWindow" class="modal">
    <div class="fg">
        Hello, world
    </div>
</div>

위 코드를 문서에 포함한 후 문서를 다시 읽고 버튼을 클릭하면 다음과 같은 화면을 볼 수 있다.

뿐만아니라 앵커 요소에는 모달창을 열 때 사용할 옵션을 설정할 수 있다. 각 옵션은 data-* 와 같은 형태의 속성을 통해 설정한다. 예를 들어, 모달창이 페이드인 또는 페이드아웃되는 속도를 조절하려면 data-duration 옵션을 다음과 같이 설정한다.

<a href="#modalWindow" class="modalAnchor" data-duration="fast">모달창 열기</a>

현재 사용할 수 있는 옵션은 다음과 같다.

• data-effect : 모달창을 표시할 때 사용할 효과. 선택 가능한 값은 fade(기본값), rise
• data-duration : 효과를 실행할 시간. fast, slow 또는 밀리초(ms) 단위의 시간 숫자

Events

프로그램에서 사용자 액션을 통하지 않고 모달창을 띄우거나 닫고 싶으면 jQuery 함수를 사용해 앵커 요소를 선택한 후 선택한 jQuery 요소에서 open.mw 또는 close.mw를 사용한다. 모달창을 열려면 open.mw를, 닫으려면 close.mw를 사용한다.

<a href="#modalWindow" class="modalAnchor">모달창 열기</a>

<script>
jQuery('a.modalAnchor').trigger('open.mw');
</script>

만약 모달창을 열거나 닫기 전에 실행하고 싶은 코드가 있다면 이벤트 이름 앞에 before-, after-를 접두어로 추가하여 이벤트 핸들러를 할당하면 된다. 예를 들어, 모달창을 열기 전에 실행하고 싶은 코드는 다음과 같이 할당할 수 있다.

jQuery('a.modalAnchor')
   .bind('before-open.mw', function(){
      // 실행할 코드
   });

마찬가지로 모달창을 닫은 직후에 실행할 코드는 after-close.mw 이벤트를 사용하면 된다.

jQuery('a.modalAnchor')
   .bind('after-close.mw', function(){
      // 실행할 코드
   });

after-와는 달리 before- 이벤트에서는 원래의 이벤트를 취소할 수 있다. 예를 들어, before-open.mw 이벤트에서 창 열기를 취소하고 싶으면 다음과 같이 기본 동작을 취소하면 된다. 이벤트 핸들러 함수의 첫 번째 인수로 이벤트 객체를 전달받고 이벤트 객체의 preventDefault() 메소드를 실행하면 기본 동작이 취소된다.

jQuery('a.modalAnchor')
   .bind('before-open.mw', function(event){ 
      // 이벤트 취소 - 모달창이 열리지 않음
      event.preventDefault();
   });

간단하게 false를 반환하는 방법도 있다.

jQuery('a.modalAnchor')
   .bind('before-open.mw', function(event){ 
      // 이벤트 취소 - 모달창이 열리지 않음
      return false;
   });

마찬가지로 before-close.mw 이벤트에서 기본 동작을 취소하면 모달창이 닫히지 않게 된다.

jQuery('a.modalAnchor')
   .bind('before-close.mw', function(event){ 
      // 이벤트 취소 - 모달창이 닫히지 않음
      return false;
   });

jQuery Plugin

이 패턴은 페이지를 읽어들일 때 자동으로 실행되기 때문에 페이지 요소를 동적으로 생성하는 경우에는 적용되지 않는 문제가 있다. 다음과 같이 modalAnchor 요소를 선택한 후 xeModalWindow 메소드를 실행하면 페이지를 읽어들인 뒤에도 스크립트를 적용할 수 있다.

$('a.modalAnchor').xeModalWindow();