-모달 창을 띄우기 위해선 아래의 두가지 속성을 가지고 있는 <button> 이나 <a> 링크가 필요하다.
data-toggle="modal" 모달 창을 연다.
data-target="#myModal" 띄울 모달창의 id를 지정한다.
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
-모달의 가장 바깥 <div> 태그는 myModal을 띄울때 사용되는 속성인 data-target의 값과 같은 id 를 가져야한다.
.modal 클래스는 <div>의 내용이 모달임을 명시하는 것이며 이 모달 창으로 focus 를 준다.
.fade는 모달창이 뜨거나 사라질때 효과를 주는 것일 뿐 지우고 싶으면 지워도 된다.
.modal-dialog 클래스를 준것도 대화창 처럼 모달창을 띄워주기위해 속성을 먹인 것이다.
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
.modal-header, .modal-body, .modal-footer 클래스를 가진 <div>를 감싸는 <div>에 .modal-content 클래스를 추가하면 배경색이나, 경계선 등 모달같은 스타일이 적용된다.
.modal-header 클래스는 모달의 헤더를 위한 스타일 정의를 위해 사용됐고, <button>안의 data-dismiss="modal" 속성은 클릭하면 모달창을 닫을수 있도록 하는 것이다.
.close 클래스는 닫는 버튼의 스타일을 적용한다.
.modal-title은 헤더가 적절한 높이에 있도록 스타일을 적용시켜준다.
<!-- 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>
.modal-body 클래스는 모달의 몸체를 위한 스타일을 정의하기위해 사용된다. 이 안에는 어떤 HTML 마크업이 와도 된다.
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
.modal-footer 클래스는 모달의 아랫부분을 위한 스타일을 정의하기위해 사용된다. 이 부분은 오른쪽 정렬이 default로 지정되어있다.
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
어쨌든 전체 기본적인 전체 코드는 아래와 같고, 모달 옵션의 참고는 다음 링크를 참고하자. JS modal reference
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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>
