모달 플러그인
모달 플러그인은 현재 페이지의 상단에 표시되는 대화 상자 / 팝업 창입니다 :
팁 : 플러그인은 (부트 스트랩의 개별 이용하여 개별적으로 포함될 수있다 "modal.js" (사용, 또는 모두 한 번에 파일) "bootstrap.js" 또는 "bootstrap.min.js" ).
모달을 만드는 방법
다음의 예는 기본 모달를 만드는 방법을 보여줍니다 :
예
<!-- 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>
»그것을 자신을 시도 예 설명
"Trigger" 부분 :
모달 창을 트리거하려면, 당신은 버튼이나 링크를 사용해야합니다.
그런 다음이 포함 data-* 속성 :
-
data-toggle="modal"모달 창을 엽니 다 -
data-target="#myModal"모달의 ID 포인트
"Modal" 부분 :
부모 <div> 모달의 모달 트리거하기 위해 사용되는 데이터의 타겟의 속성 값과 같은 인 ID 있어야 ("myModal") .
.modal 클래스의 내용을 식별하는 <div> 모달로하고 그것에 초점을 제공합니다.
.fade 클래스에 밖으로 모달을 페이드 전환 효과를 추가합니다. 이 효과를하지 않으려면이 클래스를 제거합니다.
속성의 role="dialog" 스크린 리더를 사용하는 사람들에 대한 접근성을 향상시킨다.
.modal-dialog 클래스는 모달의 적절한 폭과 여백을 설정합니다.
은 "모달 내용"부분 :
<div> 와 class="modal-content "스타일 모달 (테두리, 배경 색 등). 이 내부 <div> , 모달 헤더, 본문 및 바닥 글을 추가합니다.
.modal-header 클래스는 모달의 헤더의 스타일을 정의하는 데 사용됩니다. <button> 헤더 내부는이 data-dismiss="modal" 당신이 그것을 클릭하면 모달을 닫 속성을. .close 클래스 스타일 닫기 버튼 및 .modal-title 클래스 스타일 적절한 라인 높이 헤더.
.modal-body 클래스는 모달의 몸의 스타일을 정의하는 데 사용됩니다. 여기에 모든 HTML 마크 업을 추가; 단락, 이미지, 동영상 등
.modal-footer 클래스는 모달의 바닥 글의 스타일을 정의하는 데 사용됩니다. 이 지역 오른쪽 기본적으로 정렬되어 있습니다.
모달 크기
가산하여 모달의 크기를 변경 .modal-sm 작은 조동사 나에 대한 클래스를 .modal-lg 큰 조동사를위한 클래스입니다.
받는 사람 크기의 클래스를 추가 <div> 클래스 요소 .modal-dialog :
 | 기본적으로, 조동사은 중간 크기. |
|---|
부트 스트랩 모달 참조 완료
모든 모달 옵션, 방법 및 이벤트의 완전한 참고로, 우리로 이동 부트 스트랩 JS 모달 참조 .