모달 작동원리

모달 작동원리

(아이콘)

(모달창)

data-toggle=“modal” : 자바스크립트에 의해 작동하므로 이 속성을 추가해야 합니다. (이 속성은 토글 역할을 합니다. 즉, 클릭하면 팝업창이 나타나고 다시 이 버튼을 클릭하면 사라집니다.)

data-target=“#myModal” : 버튼을 클릭했을 때 열리는 대상 모달창의 id값을 넣어줍니다.

class=“modal fade” : .modal은 포지션을 정하기 위한 것이므로 나타나는 위치를 수정하려면 이 선택자에 대해 스타일을 재설정하면 됩니다. .fade는 창이 나타날 때 페이드 효과를 주기 위한 것입니다.

ass=”modal-dialog“ : 실제 모달 창의 너비나 높이를 수정하려면 이 선택자의 스타일을 수정하면 됩니다.

class=”close“ : .close는 X 아이콘을 오른쪽에 배치하고 닫는 역할을 합니다.

data-dismiss=”modal“ : 자바스크립트에 의해 닫기 역할을 하는 것이 이 속성입니다.

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

role=”dialog” aria-labelledby=”myModalLabel“ : 웹 접근성 측면에서 추가하는 속성입니다.

aria-hidden=”true“ : 평상시에는 감춰진 상태이지만 모달 창이 열리면서 aria-hidden=”false“로 바뀝니다.

https://zzznara2.tistory.com/588

from http://late90.tistory.com/87 by ccl(A) rewrite - 2021-12-24 02:01:14