Modal 정의
현재 페이지 위에 표시되는 대화 상자 / 팝업 창.
모달 플러그인은 아래 파일들 중 하나 추가하면 됨.
개별: "modal.js" 파일.
통합: "bootstrap.js" (또는 "bootstrap.min.js"사용)
Modal 구문
<!-- 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-toggle="modal" : 모달 창 열기
data-target="#myModal" : 모달의 ID 가리킴
"Modal" 부분 :
id="myModal" : 모달 띄우는 데 사용된 data-target 속성값 ( "myModal")과 동일한 ID 와야 함.
.modal 클래스 : <div>의 내용을 모달로 식별하고 focus 맞춤.
.fade 클래스 : 모달을 fade in 및 fade out하는 전환 효과 추가. 원치 않으면 제거.
role="dialog" : 스크린 리더를 사용하는 사람들의 접근성을 향상 시킴.
.modal-dialog 클래스 : 모달의 적절한 폭과 여백 설정.
"Modal Contents" 부분 :
.modal-content 클래스 : 모달 스타일 (테두리, 배경색 등). 이 안에 모달 헤더, 본문, 꼬리말 추가.
.modal-header 클래스 : 모달 헤더 스타일 정의.
data-dismiss="modal" : 모달 닫기.
.close 클래스 : 닫기 버튼 스타일 정의.
.modal-title 클래스 : 모달제목 적절한 라인 높이.
.modal-body 클래스 : 모달 본문의 스타일 정의. 여기에 HTML 마크 업 추가. 단락, 이미지, 비디오 등
.modal-footer 클래스 : 모달 꼬리말 스타일 정의. (기본적으로 오른쪽 정렬.)
Modal Size (크기 )
<div class="modal-dialog modal-sm ">
<div class="modal-dialog modal-lg ">
CSS
.modal-title {
margin: 0;
line-height: 1.42857143;
}
JS Modal
Modal Class (클래스)
.modal
모달 생성.
.modal-content
테두리, 배경색 등으로 모달의 스타일을 올바르게 지정.
이 클래스를 사용하여 모달의 머리글, 본문, 꼬리말 추가.
.modal-header
모달의 헤더 스타일을 정의.
.modal-body
모달 본문의 스타일을 정의.
.modal-footer
모달의 바닥 글 스타일을 정의.
참고 :기본적으로, 오른쪽 정렬. (변경하려면, text-align : left|center로 CSS 재정의.)
.modal-sm
작은 모달 지정.
.modal-lg
큰 모달 지정
.fade
모달을 서서히 나타나거나 사라지게 하는 animation/transition 효과 추가.
Modal 방법 - data-* 속성 이용
[Modal 촉발 버튼 유형]
<!-- Button 태그 -->
<button type="button" data-toggle="modal" data-target="#myModal " >Open Modal</button>
<!-- a 태그 -->
<a data-toggle="modal" href="#myModal " >Open Modal</a>
<!-- 그외 요소 -->
<p d ata-toggle="modal" data-target="#myModal " >Open Modal</p>
[예제]
<!-- modal 띄우는 버튼 -->
<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">×</button>
<h4 class="modal-title">Modal 제목</h4>
</div>
<div class="modal-body">
<p>Modal 내용</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Modal 방법2 - JS 이용
<!-- Modal 촉발 버튼 -->
<button type="button" class="btn btn-info btn-lg" id=" myBtn " >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">×</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>
...
<script>
$(document).ready(function(){
$("#myBtn ").click(function(){
$("#myModal ").modal();
});
});
</script>
Modal Option (옵션)
backdrop
모달에 어두운 오버레이 배경 추가 여부 지정.
가능 옵션값 종류: boolean | static (기본값: true)
true - 어두운 오버레이 (기본값)
false - 오버레이 없음 (투명)
"static" - Modal 외부 클릭 할 때 모달을 닫을 수 없음.
keyboard
Esc 키로 모달을 닫을 수 있는지 여부 지정.
가능 옵션값 종류: boolean (기본값: true)
true - Esc 키로 Modal 닫기 가능.
false - Esc 키로 Modal 닫기 불가능.
show
초기화 될 때 모달을 표시할지 여부를 지정.
가능 옵션값 종류: boolean (기본값: true)
Modal Method (메서드)
.modal (options )
컨텐츠를 모달로 활성화. 유효값은 위 옵션 참조.
.modal ( "toggle")
모달을 토글.
.modal("show")
모달 보이기.
.modal("hide")
모달 숨기기.
Modal Event (이벤트)
show.bs.modal
모달이 표시 될 때 발생.
shown.bs.modal
모달이 완전히 표시되면 발생. (CSS 전환 완료 후)
hide.bs.modal
모달을 숨기려고 할 때 발생.
hidden.bs.modal
모달이 완전히 숨겨져있을 때 발생. (CSS 전환 완료 후)
Modal Outlogin (아웃로그인)
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
...
<!-- Modal 촉발 버튼 -->
<button type="button" class="btn btn-default btn-lg" id="myBtn ">로그인</button>
<!-- Modal -->
<div class="modal fade" id="myModal " role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p><a href="#">회원가입</a></p>
<p><a href="#">정보찾기</a></p>
</div>
</div>
</div>
</div>
...
<script>
$(document).ready(function(){
$("#myBtn ").click(function(){
$("#myModal ").modal();
});
});
</script>
결과보기
