JS - 모달창
바닐라 JS 모달 작성 모달창 생성구현 모달은 팝업이랑 다르게 현재 페이지 위에 새로운 레이어이다. 흔히 보듯 어떤 이미지 클릭하면 뒤로 흐리게 표시되고 그 이미지가 페이지 이동없이 확대되는 그런 창을 뜻한다. 구현에는 여러 방법이 있겠지만 나는 display none block으로 생겼다 없어졌다하는 방법과 z-index로 구현해보았다. display none block 모달창을 미리 화면에 그려넣고 해당 속성을 none으로 주게되면 해당 요소가 랜더트리에 포함되지 않는다. 따라서 none에서 다른 속성으로 바꾸게 되면 (또는 그 반대의 경우에도) 요소의 위치 및 크기를 계산하는 리 플로우, 요소를 화면에 그리는 리페인트과정이 수행된다. 트랜지션 적용 불가 transition은 어떤 속성값이 변경될 때..
프로그래밍/JavaScript
2021. 1. 11. 13:28
반응형
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
농담곰의 고군분투 개발기