부트스트랩 modal 사용하기

w3schools나 bootstrap 공식홈페이지를 잘 참고하고 있지만, 매번 까먹어서 이참에 정리를 해본다.

 

 

1. 모달 띄우는 방법

 

모달에 트리거를 거는 방법은 두 가지가 있다.

<a>태그나 <button>, 혹은 다른 element 에 data-toggle, data-target 옵션을 걸어 띄우거나

자바스크립트를 직접 작성하여 띄울 수 있다.

 

먼저 id="myModal"은 아래와 같고,

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

myModal을 띄우는 두 가지 방법은 아래에서 좀 더 자세하게 알아보자.

 

<a>태그나 <button>, 혹은 다른 element 에 data-* 속성 사용해서 모달 띄우기 (출처: w3schools)

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
 
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
 
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>

이때, data-toggle 옵션은 항상 필요하며

<a>태그의 경우에만 data-target 대신 href 를 사용할 수 있다.

만약 배경을 클릭해도 모달이 닫히지 않게 하려면 data-backdrop="static" 같은 옵션을 이 때 써도 된다.

별도의 자바스크립트는 필요하지 않다.

 

 

자바스크립트로 띄우기 (출처: w3schools)

html

<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

별도의 data-* 속성들은 사용하지 않는다.

 

JavaScript

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});
</script>

 

 

 

2. 모달 작성하기

 

모달은 아래 클래스들의 div영역들이 모여서 만들어진다.

• .modal
• .modal-dialog
• .modal-content
• .modal-header
• .modal-body
• .modal-footer

 

 

.modal

여러 div가 모여 이뤄진 모달에서 부모div이다.

 

모달들간 구별을 위해 id를 지어줘야 한다. 이 id는 트리거영역의 data-target에 오는 id이다. (예. myModal)

 

화면에서 focus를 가져오는 역할을 한다. 따라서 모달을 닫을때 애니메이션 효과를 주는 클래스 .fade 를 넣을 수 있다.

 

화면을 보는사람들에게 좀더 접근을 쉽게 하기 위해 role="dialog" 속성을 줄 수 있다.

 

(출처: bootstrapk.com)

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

role="dialog", aria-labelledby="myModalLabel" -> 모달 제목을 알린다

aria-hidden="true" -> 모달의 DOM 요소를 건너뛰는 것을 보조 공학에게 전달하기 위해
aria-describedby -> 모달 다이얼로그의 설명을 넣을 수 있다

 

 

.modal-dialog

 

모달의 width, height 가로세로 크기를 결정한다.

모달의 크기를 조절하는 클래스는 .modal-sm, .modal-lg 가 있다. (Default는 medium 사이즈다.)

(출처: w3schools)

<div class="modal-dialog modal-sm">

 

 

1

<div class="modal-dialog" role="document">

cs

 

role="document" -> 무슨 역할인지...

 

 

.modal-content

 

모달의 스타일(border, background-color 등)을 결정한다.

.modal-content 안에는 모달의 헤더, 바디, 푸터가 온다.

 

.modal-header

<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">Modal title</h4>
</div>

class="close" -> x 버튼 스타일 결정

data-dismiss="modal" -> x아이콘을 클릭하면 모달이 닫히도록 한다

class="modal-title" -> 헤더에 적당한 line-height 스타일을 결정

 

.modal-body

마크업언어를 자유롭게 쓸 수 있다.

 

부트스트랩 그리드를 이용하려면 .row 를 사용하면 된다.

(출처: getbootstrap.com)

<div class="modal-body">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-xs-8 col-sm-6">
          Level 2: .col-xs-8 .col-sm-6
        </div>
        <div class="col-xs-4 col-sm-6">
          Level 2: .col-xs-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

 

 

 

.modal-footer

오른쪽 정렬이 기본이다.

 

 

 

modal 전체 소스 (출처: bootstrapk.com)

 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

 

 

 

 

3. 모달 옵션 및 메소드