06.JS-모달(Modal)

모달 플러그인 클래스

.modal	모달 생성 클래스
.modal-content	모달의 테두리, 배경컬러등 스타일이 정의되어있고, 이 클래스 안에는 모달의 헤더, 바디, 푸터 클래스를 사용할수있다.
.modal-header	모달의 헤더 부분 정의.
.modal-body	모달의 바디 부분 정의.
.modal-footer	모달의 풋터 부분 정의. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left|center
.modal-sm	작은 사이즈의 모달
.modal-lg	큰 사이즈의 모달
.fade	페이드 효과 적용

모달 링크 부분

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

모달 연결 기본 예제

 <!-- 모달 버튼 -->
 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

 <!-- 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">&times;</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>