Modal요소는 현재 페이지의 상단에 표시되는 대화상자/팝업창입니다.

모달 구현하기

모달은 1개의 버튼과 내용창으로 구분됩니다.

<div class="container">
  <h2>실전홈페이지제작강좌</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    자세히보기
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">실전홈페이지제작강좌특징</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          html,css기초부터 홈페이지제작 모든 과정<br>
          그누보드설치부터 관리, 테마 만들기까지<br>
          CSS Grid 강좌<br>
          PHP5강좌<br>
          부트스트랩4 강좌<br>
          ....
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

모달 크기

.modal-sm 또는 .modal-lg클래스를 추가하여 모달의 크기를 조정할 수 있습니다.

.modal-dialog가 있는 <div>요소에 크기 클래스를 추가합니다.

작은 크기의 모달

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

큰 크기의 모달

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

** 기본값은 중간 크기입니다.

가운데 맞춤(세로/가로) 모달

.modal-dialog-centered 클래스를 사용하여 모달을 가로/세로 가운데 맞춤을 할 수 있습니다.

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