[Bootstrap] modal 사용하기

설치 글 이후에 다음날 게시하려 했지만,,

개인사정으로 이렇게 며칠이 지나고 글을 씁니다😂

(4학년되면 할게 조금은 줄어드는줄 알았더니 아니었네여,,넘바쁨)

 

부트스트랩의 유용한 기능 중 한가지인 모달 팝업을 사용하기위한

간단한 예시를 게시해볼게요.

저는 보통 로그인 창을 띄우거나 이미지를 누르면 간단한 정보를 보여주거나,,등등

페이지를 이동하지 않고 다른 구성의 창을 보여줘야할 때 유용하게 모달 팝업 기능을 사용하고 있어요!

---

부트스트랩이 설치되어 있다는 전제하에 진행해볼게요

 

1. Modal 기본 사용법

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

버튼을 눌렀을 때, 모달 창이 띄워지게 됩니다.

button의 data-toggle 속성을 "modal"로 설정해야하며 data-target 속성은 출력할 modal div객체의 id를 넣어줍니다.

class속성에 modal을 가진 div가 모달의 전체를 포함한 가장 큰 껍데기라고 생각하면 쉬울거같아요.

modal content안에 모달을 구성할 내용이 들어가게 되는데요.

1. Header, 2. body, 3. footer 세개의 구성으로 이루어지게 됩니다.

판단에 따라 구성은 변경해서 사용하면 됩니다! 저는 footer를 굳이 안쓸때도 종종 있어요.

버튼 속성 값으로 data-dismiss="modal"을 넣어주면 닫기 기능을 적용 할 수 있어요.

 

2. 추가 속성

• Vertically centered:
  modal-dialog 클래스가 지정된 div에 .modal-dialog-centered 클래스를 추가해주면 모달창이 수직 중앙에 위치하게 할 수 있습니다.
  
  
• Tooltip, popover:
  모달안에서 툴팁과 팝오버 클래스 모두 사용 가능합니다.
• Sizes:
  
  

  Size	Class	Modal max-width
  Small	.modal-sm	300px
  Default	None	500px
  Large	.modal-lg	800px
  Extra large	.modal-xl	1140px

  별다른 지정이 없다면 기본 속성인 중간 사이즈의 모달이 적용됩니다.
  모달 사이즈는 상황에 따라 자주 지정하게 되는 속성이기에 코드 추가합니다.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

이 외에 추가적인 속성들은 공식 문서를 참고해주세요.

https://getbootstrap.com/docs/4.3/components/modal/

Modal

 

---

공부한 내용들을 기록하는 습관이 잘 자리잡도록,,

화이팅 내인생 ㅎㅎ,,😇