부트스트랩 모달 닫기 이벤트

부트스트랩 모달 레이어 팝업 제어하기

웹을 개발하면서 CSS에 대해 지식이 부족하더라도 부트스트랩을 이용하면 어느정도 디자인을 하실수 있죠. 보기좋은 떡이 먹기도 좋듯이 웹사이트 또한 디자인이 상당히 중요하다고 저는 생각 합니다. 저는 혼자 개발 할때가 자주 있는데 이럴때면 부트스트랩 템플릿 사이트나 관련 CSS 파일들을 보며 공부를 하곤 합니다. 그 중에서도 요새 많이 쓰이는 레이어팝업, 다른 말로 모달창이라고도 하죠. 이것을 어떻게 화면에 띄우고 제어하는지에 대해서 공부하려고 합니다.

Bootstrap Modal 창

다음과 같이 기존 자바스크립트 alert 창을 이용하지 않고 CSS를 이용하여 기존 화면을 어둡게 처리하고 그 바로 위에 팝업창을 띄우는 효과 입니다. 이질감 없이 훨씬 자연스러운 팝업창을 표현 할수 있는게 큰 장점입니다. 요새 레이어 팝업창을 쓰는 웹페이지들이 많습니다.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="margin:15px; padding:15px;">
  모달창 연습
</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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal 제목</h4>
      </div>
      <div class="modal-body">
        Modal 내용
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
      </div>
    </div>
  </div></div>

위와같이 간단한 소스로도 표현이 가능하구요. 나머지는 부트스트랩 템플릿을 참고하시고 응용하시면 더 멋진 팝업창을 만드실수 있어요. 

제이쿼리를 이용한 모달 닫기 이벤트 및 여러 이벤트 

 
$('#modal').modal("hide"); //닫기 
 
$('#modal').modal("show"); //열기

bootstrap modal 에서 영역 밖을 선택했을 때 modal 이 닫히는걸 방지

* 아래의 모든 이벤트는 위에 모달 <div> 에 추가 해주시면 됩니다.

data-backdrop="static"

bootstrap modal 에서 ESC 눌러도 창 안닫히게 하는 방법

data-keyboard="false"