먼저, Hammer.js 라이브러리를 다운로드하고 HTML 파일에 포함시킵니다.

<script src="hammer.min.js"></script>

다음으로, 모달 창을 나타내는 HTML 요소를 만들고 id를 제공합니다.

<div id="modal">모달 창 내용</div>

자바스크립트에서 Hammer.js를 사용하여 터치 이벤트를 처리합니다. 아래 예제 코드에서는 tap 이벤트를 사용하였습니다.

// 모달 요소를 가져옵니다.
var modal = document.getElementById('modal');

// Hammer.js를 이용하여 터치 이벤트를 처리합니다.
var mc = new Hammer(modal);

mc.on('tap', function() {
  // 모달 창을 숨기는 로직을 작성합니다.
  modal.style.display = 'none';
});

위의 코드는 tap 이벤트를 처리하며, 모달 창을 클릭하거나 터치하면 모달 창이 숨겨지도록 만들어줍니다. 여기서는 display 속성을 이용하여 모달 창을 숨기는 것을 보여주었습니다.

이제 터치 이벤트가 모달에 적용되었습니다. Hammer.js는 다양한 이벤트를 제공하기 때문에 필요에 따라 다른 이벤트를 사용할 수도 있습니다. 자세한 내용은 Hammer.js 공식 문서를 참조하시기 바랍니다.

참조:

• Hammer.js 공식 사이트
• Hammer.js GitHub 저장소