Bootstrap modal 사이즈 및 위치 조절

Bootstrap의 자바스크립트 기능 중 하나인 modal 사용법을 간단하게 소개하고 CSS 클래스 조정을 통해 화면 가득 찬 modal과 화면 정중앙에 위치한 modal을 만들어본다.

1. Bootstrap modal의 기본적인 활용방법

공식 문서를 참조하면 금방 이해할 수 있다. 기본적으로 별도의 자바스크립트 없이 HTML5의 특성인 data- 속성을 이용하면 modal이 구현된다. 구동하고자 하는 버튼이나 링크에 data-toggle="modal"을 부여하면 modal을 띄울 준비가 되고 data-target="DOM선택자"를 입력하면 지정된 내용을 modal로 띄울 수 있다. 아래의 HTML코드는 공식 문서의 예제를 가져온 것이다.

<!-- modal 구동 버튼 (trigger) -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Modal 띄우기
</button>

<!-- Modal -->
<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>

Bootstrap에서 기본적으로 제공하는 옵션으로 modal 창의 사이즈를 조절할 수 있는데 modal-sm (small), modal-lg (large)의 클래스를 덧붙힘으로써 구현된다.

<!-- 작은 modal --> <div class="modal fade" id="mySmallModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> ... </div> </div>

<!-- 큰 modal --> <div class="modal fade" id="myLargeModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> ... </div> </div>

기본적으로 이렇게 세 가지의 크기를 선택하여 사용할 수 있고, modal의 위치는 화면 약간 상단에 위치하게 된다. 좀 더 자세한 조절을 원한다면? 직접 CSS 클래스 변경을 통해 자유롭게 크기와 위치를 변경하는 방법을 간단히 정리하겠다.

2. Bootstrap modal의 크기 조절

기본적인 Bootstrap CSS 위에서 새로운 CSS 클래스를 만들어 modal의 크기가 화면 꽉치게 나타나도록 해보겠다. 다음은 CSS 추가 내용이다.

.modal-dialog.modal-fullsize {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.modal-content.modal-fullsize {
  height: auto;
  min-height: 100%;
  border-radius: 0; 
}

이제 새로 지정한 CSS클래스를 사용하기 위해 지정한 곳에 modal-fullsize 클래스를 알맞은 곳에 넣어주면 된다.

<!-- 화면 꽉찬 modal --> <div class="modal fade" id="myFullsizeModal" tabindex="-1" role="dialog" aria-labelledby="myFullsizeModalLabel"> <div class="modal-dialog modal-fullsize" role="document"> <div class="modal-content modal-fullsize"> ...     </div> </div> </div> 

위에 지정한 CSS 코드에서 width와 height를 원하는 퍼센티지로 변경해서 사용할 수 있을 것이다.

3. Bootstrap modal의 위치 조절

위 JSFiddle 예제를 봤을 때 크기를 조절하는 대가로 위치를 잃는다. Full size modal은 상관 없지만... 그보다 작게 할 경우에 위치 조정은 필수가 된다. 따라서 우리는 위치도 다시 설정해야 할 것이다. 방법은 크기를 조절했던 것과 동일하다. CSS 클래스를 다음과 같이 추가하자. 참고로 좁은 화면에서는 Bootstrap이 기본으로 주는 위치를 그냥 쓰는 것이 낫다고 하기 때문에 min-width 설정을 주었다.

.modal.modal-center {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal.modal-center:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog.modal-center {
  display: inline-block;
  text-align: left;
  vertical-align: middle; 
}

그리고 HTML코드에 적용하면 될 것이다.

<!-- 정중앙 modal --> <div class="modal modal-center fade" id="myCenterModal" tabindex="-1" role="dialog" aria-labelledby="myCenterModalLabel"> <div class="modal-dialog modal-center" role="document"> <div class="modal-content"> ...     </div> </div> </div> 

프론트엔드 쪽 포스트의 경우 JSFiddle이라는 편리하고도 강력한 툴이 있기 때문에 다음부터는 코드를 따로 쓰지 않고 JSFiddle안에 넣는 것으로 대체하는 것이 어떨까 하는 생각이 든다. 그럼 이만 뿅