모달 다이얼로그

head

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

 

 

 

body

<div class="container">

	<h2>모달</h2>

	<!-- 버튼 -->
	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >
	  Launch demo modal
	</button>

	<!-- 모달 팝업 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
		<h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
		...
	      </div>
	      <div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		<button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>

</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://googledrive.com/host/0B-QKv6rUoIcGREtrRTljTlQ3OTg"></script><!-- ie10-viewport-bug-workaround.js -->
<script src="http://googledrive.com/host/0B-QKv6rUoIcGeHd6VV9JczlHUjg"></script><!-- holder.js -->

설명

모달이란 버튼을 클릭하면 팝업창이 위에서 내려오는 구조입니다.
용도는 다양한데 로그인, 회원가입, 알림 메시지 등 여러 용도로 사용할 수 있습니다.

 

data-toggle=“modal” : 자바스크립트에 의해 작동하므로 이 속성을 추가해야 합니다. (이 속성은 토글 역할을 합니다. 즉, 클릭하면 팝업창이 나타나고 다시 이 버튼을 클릭하면 사라집니다.)
data-target=“#myModal” : 버튼을 클릭했을 때 열리는 대상 모달창의 id값을 넣어줍니다.
class=“modal fade” : .modal은 포지션을 정하기 위한 것이므로 나타나는 위치를 수정하려면 이 선택자에 대해 스타일을 재설정하면 됩니다. .fade는 창이 나타날 때 페이드 효과를 주기 위한 것입니다.

 

class=”modal-dialog“ : 실제 모달 창의 너비나 높이를 수정하려면 이 선택자의 스타일을 수정하면 됩니다.
class=”close“ : .close는 X 아이콘을 오른쪽에 배치하고 닫는 역할을 합니다.
data-dismiss=”modal“ : 자바스크립트에 의해 닫기 역할을 하는 것이 이 속성입니다.

 

class=”modal-body“ : 모달의 콘텐츠를 입력하는 부분입니다.

 

role=”dialog” aria-labelledby=”myModalLabel“ : 웹 접근성 측면에서 추가하는 속성입니다.
aria-hidden=”true“ : 평상시에는 감춰진 상태이지만 모달 창이 열리면서 aria-hidden=”false“로 바뀝니다.

출처: http://scriptmoa.tistory.com/112 [스크립트 모아]