modal 만드는 방법

먼저 modal 을 이해하기 위해서는 absolute와 relative 관계를 이해를 해야하는데 제가 이해한 부분은 absolute는 도화지 relative는 그 도화지에 그리고자하는 대상이라고 생각하니 이해하기가 쉬웠습니다. 

 

1. html에서 absolute 대상과 relative 대상을 간단하게 만듭니다.

        <div class="absolute">
            <div class="relative">
                test
            </div>
        </div>

주의) 만약 전체 영역을 대상으로 absolute를 설정해야한다면 .absolute에 css width: 100%, height: 100% 지정시 전체 영역이 되는 지 부터 확인을 해야합니다. 만약 하위에 속해서 다른 css에 영향을 받는다면 전체 영역 칸으로 빼내야합니다. 만약 지금 설명하는 것이 이해가 안되신다면 css layout 설정하는 방법을 다시 공부하시길 바랍니다. 

 

2. 먼저 absolute 영역에 position absolute를 지정해서 제대로 영역이 표시되는 지 확인합니다. 

.absolute{
    z-index: 99;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

참고) z-index를 사용한 이유

z-index를 이해하기 위해서는 먼저 x, y, z 방향을 이해해야 합니다. x축은 좌우가 될 것이고 y축은 위아래, z축은 앞뒤입니다. 즉 z-index가 높을 수록 다른 css보다 앞에 있다는 의미입니다. modal이 뜨게 되면 다른 function이 적용되면 안되기 때문에 어떤 대상들보다 z-index가 높아야합니다. 

 

3. relative 영역에 position relative를 지정해서 modal form을 만듭니다.

.relative{
    width: 200px;
    height: 200px;
    background-color: #fff;
    position: relative;
}

참고) 이렇게만 설정하면 위치가 가장 상단 좌측 끝쪽에 배치되는 것을 볼 수 있습니다. 그것은 위치 설정을 해주지 않았기 때문에 당연한 현상입니다. 

 

4. modal 위치를 absolute 영역에서 설정해줍니다.

.home-modal-overlay{
    z-index: 99;
    position: absolute;
    width: 100%;
    height: 100%;
    // 가운데 center 설정
    display: flex;
    justify-content: center; 
    align-items: center;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

참고) 이 원리는 absolute 영역이기 때문에 하는 것보다는 위치 이동을 하기 위해서는 당연히 상위에서 움직이기 때문에 만약에 이부분이 이해가 안되신다면 먼저 css flex 응용 원리를 먼저 이해하시길 바랍니다. 그만큼 modal은 css 기본이 되어있지 않으면 아무리 적용한다해도 더 꼬일 수 있기 때문입니다.

5. modal이 나올 수 있는 button을 생성하고 absolute class 영역을 display:none으로 해주시길 바랍니다. 그리고 button 클릭시 modal alert 가 나올 수 있게 설정합니다. 

참고) .absolute css에 display:none을 추가하시면 돼고 alert 확인하는 이유는 먼저 click event가 제대로 되는 지 확인하고 정상 작동시에 이어서 진행하기 위함입니다. 추가적으로 설명하지는 않겠습니다.

 

6. modal button 클릭시 modal absolute 영역을 toggle()을 이용해서 바뀔 수 있게 구현합니다.

    $(document).on("click", "#modal-btn", function(){
        $('.home-modal-overlay').toggle()
    })

참고) display: block으로 처리하게 될 경우 center 적용할 때 이미 display: flex로 설정했기 때문에 flex가 주석처리 돼서 가운데 정렬이 안될 수가 있습니다. 그렇기 때문에 최대한 modal을 toggle을 이용해서 보이게 설정하시면 됩니다. 그렇다면 modal에서 나갈 때에도 이러한 방법을 응용하시면 됩니다.