모달창 안뜨는 이유 - modalchang antteuneun iyu

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

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

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

기존 바닐라 자바스크립트인 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의 이벤트를 걸었고 취소에는 모달이 닫히는 이벤트를 걸었습니다.

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

<!-- 모달을 열기 위한 버튼 -->
<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/

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

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