[Bootstrap] 모달 (Modal)

안녕하세요. 명월입니다.

이 글은 부트스트랩에서 팝업, 즉 모달에 관한 글입니다.

웹 서비스를 작성하다보면 페이지의 화면 전환이 아닌 팝업, 새로운 창을 열어야 하는 경우가 있습니다.

기존 바닐라 자바스크립트인 Window.open으로도 팝업을 만들 수는 있습니다. 그러나 Window.open으로 연 팝업은 팝업이긴 한데 새로운 윈도우창을 생성한 것이라 자바스크립트로 제어하기에는 한계가 있습니다.

그래서 예전에 레이아웃 팝업이라고, 새로운 윈도우가 아닌 웹 페이지 안에서 열리는 팝업이 있습니다.

이것이 부트스트랩에서는 모달이라 불립니다.

부트스트랩 3.x - https://getbootstrap.com/docs/3.4/javascript/#modals

부트스트랩 4.x - https://getbootstrap.com/docs/4.3/components/modal/

먼저 모달의 기본 형태는 다음과 같습니다.

※참고로 제 블로그의 부트스트랩 버전은 3.x이기 때문에 3.x만 구현 결과를 만들 수 있습니다.

<!-- 모달을 열기 위한 버튼 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	모달 보기 버튼
</button>

<!-- 모달 영역 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">모달 타이틀</h4>
      </div>
      <div class="modal-body">
        내용
      </div>
      <div class="modal-footer">
	    <button type="button" class="btn btn-primary">확인</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">취소</button>
      </div>
    </div>
  </div>
</div>

구현 결과

모달 타이틀

내용

사실 이 modal의 경우는 3.x와 4.x는 크게 다르지 않습니다. 달라봐야 세부 클래스명 정도입니다. 전체적인 구조는 비슷합니다만, 그래서 4.x를 사용하시는 분은 위 링크로 들어가서 한번 확인해주세요.

위 소스의 예제는 태그로서 data-toggle과 data-target의 값으로 모달 박스를 Open하고, close버튼의 data-dismiss=modal 명령어로 모달 박스를 Close했습니다. 아, 위 x버튼도 data-dismiss=modal이 있습니다.

이번에는 자바스크립트로 모달을 제어하겠습니다.

<!-- 모달을 열기 위한 버튼 -->
<button type="button" class="btn btn-primary btn-lg" id="openModalBtn">
	모달 보기 버튼
</button>
<!-- 모달 영역 -->
<div id="modalBox" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">모달 타이틀</h4>
      </div>
      <div class="modal-body">
        내용
      </div>
      <div class="modal-footer">
		<button type="button" class="btn btn-primary">확인</button>
        <button type="button" class="btn btn-default" id="closeModalBtn">취소</button>
      </div>
    </div>
  </div>
</div>
<script>
  // 모달 버튼에 이벤트를 건다.
  $('#openModalBtn').on('click', function(){
    $('#modalBox').modal('show');
  });
  // 모달 안의 취소 버튼에 이벤트를 건다.
  $('#closeModalBtn').on('click', function(){
    $('#modalBox').modal('hide');
  });
</script>

구현 결과

모달 타이틀

내용

위 소스에서 버튼의 id에 모달 open의 이벤트를 걸었고 취소에는 모달이 닫히는 이벤트를 걸었습니다.

보통은 여기까지만 사용해도 무난하긴 한데 모달 동작에 이벤트를 걸어서 사용하고 싶을 때도 있습니다.

이벤트 타입	설명
show.bs.modal	모달이 열릴 때 바로 실행되는 이벤트입니다.
shown.bs.modal	모달의 열림이 끝나고 실행되는 이벤트입니다.
hide.bs.modal	모달이 닫힐 때 바로 실행되는 이벤트입니다.
hidden.bs.modal	모달의 닫힘이 끝나고 실행되는 이벤트입니다.

<!-- 모달을 열기 위한 버튼 -->
<button type="button" class="btn btn-primary btn-lg" id="openModalBtn">
	모달 보기 버튼
</button>
<!-- 모달 영역 -->
<div id="modalBox" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">모달 타이틀</h4>
      </div>
      <div class="modal-body">
        내용
      </div>
      <div class="modal-footer">
		<button type="button" class="btn btn-primary">확인</button>
        <button type="button" class="btn btn-default" id="closeModalBtn">취소</button>
      </div>
    </div>
  </div>
</div>
<script>
  // 모달 버튼에 이벤트를 건다.
  $('#openModalBtn').on('click', function(){
    $('#modalBox').modal('show');
	console.log("click open");
  });
  // 모달 안의 취소 버튼에 이벤트를 건다.
  $('#closeModalBtn').on('click', function(){
    $('#modalBox').modal('hide');
	console.log("click close");
  });
  $('#modalBox').on('show.bs.modal', function (e) {
    console.log("show.bs.modal");
  });
  $('#modalBox').on('shown.bs.modal', function (e) {
    console.log("shown.bs.modal");
  });
  $('#modalBox').on('hide.bs.modal', function (e) {
    console.log("hide.bs.modal");
  });
  $('#modalBox').on('hidden.bs.modal', function (e) {
    console.log("hidden.bs.modal");
  });
</script>

사실 모달은 더 많은 기능이 있습니다.

위 예제는 모달 내용이 정적으로 html에 적혀있지만 내용 부분을 동적으로 활용하는 방법이나 실행하면 뒤 배경이 어둡게 되어 modal이 되지만 팝업처럼 modeless기능도 있습니다.

아래 링크로 가셔서 참고하시면 됩니다.

부트스트랩 3.x - https://getbootstrap.com/docs/3.4/javascript/#modals

부트스트랩 4.x - https://getbootstrap.com/docs/4.3/components/modal/

여기까지 부트스트랩에서 팝업, 즉 모달 박스에 관한 내용였습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.