[bootstrap] 부트스트랩 – 모달(팝업창이 위에서 내려오는 구조)

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

 

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“로 바뀝니다.