내일배움캠프 Day 23

모달 사용법

 

1.모달 화면을 만든다 HTML+CSS 

 

2.모달 화면에 들어가는 CSS를  visibility:hidden or display:none 으로 지정해 놓는다.

 

 *visibility 와 display의 차이

 

visibility:hidden <-> visible
    보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨

display:none  <-> block
    아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨
 

 

3.특정 이벤트가 발생하면 visibility:visible or disply:block 으로 설정해놓은 CSS 파일을 추가한다. 

예를 들어 어떠한 버튼(class)을 클릭 했을때 모달창을 띄우려면

 

// css //

.모달 화면 {

    z-index : 5;   -> 우선순위 지정 가장 높은 값을 줘야 맨위로 올라옴
    visibility: hidden; 
    opacity: 0;        애니메이션 시작 동작
    transition: all 0.5s;  애니메이션 시간
}





.show-modal {
    visibility: visible;
	opacity: 1;		애니메이션 끝동작
}

 

자바스크립트 

        document.getElementsByClassName('버튼')[0].addEventListener('click', () => {
            document.getElementsByClassName('모달화면')[0].classList.add('show-modal');
        })
        document.getElementsByClassName('닫기버튼')[0].addEventListener('click', (e) => {
            document.getElementsByClassName('모달화면')[0].classList.remove('show-modal');
        })

 

 

토글 사용법

모달띄우는 것과 같은 원리로 메뉴 리스트 토글버튼도 가능 

       //jS
       
       document.getElementsByClassName('메뉴버튼')[0].addEventListener('click', () => {
            document.getElementsByClassName('리스트')[0].classList.toggle('show');
        })
        
        
        //css
        .list-group{
    display: none;
}
        
        
        .show{
    display: block;
	}