팝업창 display : none과 block (+가운데 정렬)

팝업창 display : none과 block (+가운데 정렬)

QA

팝업창 display : none과 block (+가운데 정렬)

본문

팝업창을 만들고 있습니다.

이미지를 눌러 체크박스가 활성화되면 display: none으로 숨겨졌던 팝업이 나타나게 하려 합니다

그러나 두가지 문제가 있습니다

1. display: none으로 숨겨진 팝업을 display: block;으로 다시 숨김해제 하려하는데, 작동이 되지 않습니다

2. position: absolute; 와 transform: translate(-50%, -50%); 를 주었는데, 팝업이 화면 한가운데 정렬이 되지 않습니다

어떻게 하면 해결 할 수 있을까요?? 

 

해당 부분의 html 코드 입니다


<!--html-->
            <!--온라인 체크박스-->
            <input type="checkbox" id="online">
            <!--온라인 아이콘-->
            <div class="desktop-icon windows-online" title="windows online">
                <label for="online" class="desktop-icon">
                    <div class="icon">
                        <div class="icon">
                            <img src="../img/WindowsIcon01.png" alt="" />
                        </div>
                        <div class="text">인터넷</div>
                        <div id="online_layer">
                            <!--팝업창-->
                            <div id="popup">
                                <h2>
                                    제목
                                    <label for="online">X</label>
                                </h2>
                                컨텐츠 영역
                            </div>
                        </div>
                    </div>
                </label>
            </div>

 

css 입니다


 
#online {
        display: none;
    }
 
    #online+label {
        display: inline-block;
        padding: 7px 14px;
    }
 
    #online_layer {
       
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
 
    #online_layer>#popup {
        
        position: absolute;
        padding: 15px;
        box-sizing: border-box;
        width: 600px;
        height: 400px;
        border: 1px solid black;
        background: #fff;
        color: black;
 
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
 
    #online_layer>#popup>h2 {
        
        margin-bottom: 25px;
    }
 
    #online_layer>#popup>h2>label {
        
        float: right;
    }
 
    #online:checked+label {
        display: block;
    }
 
 

이 질문에 댓글 쓰기 :

답변 3


#online:checked+#online_layer {
    display: flex;
    flex-direction: column; /* 팝업이 수직으로 나타나도록 변경 */
    align-items: center;
    justify-content: center;
}

 


<label for="online" class="desktop-icon">
    <div class="icon">
        <div class="icon">
            <img src="../img/WindowsIcon01.png" alt="" />
        </div>
        <div class="text">인터넷</div>
        <div id="online_layer">
            <!-- 팝업창 -->
            <div id="popup">
                <h2>
                    제목
                    <label for="online" class="close-btn">X</label>
                </h2>
                컨텐츠 영역
            </div>
        </div>
    </div>
</label>

이렇게 하면 HTML에서 팝업을 닫기 위한 label을 클릭할 때 #online의 상태를 변경하여 팝업을 닫도록 할 수 있을 것 같습니다. 참고하셔서 원하시는 형식으로 구현하시면 되지 않을까 합니다.

아래의 코드를 참고해 보세요~

 

 

#online {
    display: none;
}

#online:checked ~ .desktop-icon #online_layer {
    display: block;
}

.desktop-icon {
    position: relative;
}

#online_layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#online_layer > #popup {
    position: absolute;
    padding: 15px;
    box-sizing: border-box;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    background: #fff;
    color: black;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 

 

 

다음과 같이 해 볼 수 있을 것 같습니다.

 

팝업 숨김 및 표시 문제 해결:

#online:checked+label에서 display: block;을 주는 것이 아니라 #online:checked+#online_layer로 수정.
팝업이 나타날 때 #online_layer의 display를 block으로 변경해야 합니다.

 

팝업 정렬 문제 해결:

팝업을 중앙 정렬하기 위해 #popup의 position: absolute;와 transform: translate(-50%, -50%);를 삭제합니다. 대신, 부모 요소인 #online_layer에 display: flex;와 align-items: center; justify-content: center;를 적용하여 중앙 정렬.

 


#online {
    display: none;
}
#online+label {
    display: inline-block;
    padding: 7px 14px;
}
#online_layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 중앙 정렬을 위한 추가 */
    display: flex;
    align-items: center;
    justify-content: center;
}
#online_layer>#popup {
    padding: 15px;
    box-sizing: border-box;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    background: #fff;
    color: black;
}
#online_layer>#popup>h2 {
    margin-bottom: 25px;
}
#online_layer>#popup>h2>label {
    float: right;
}
#online:checked+#online_layer {
    display: flex; /* 팝업 표시 시 변경 */
}

이렇게 하면 체크박스를 클릭할 때 팝업이 중앙에 정렬되어 나타날 것으로 생각합니다.

감사합니다! 팝업의 중앙정렬이 해결되었습니다.
그러나 팝업이 열리고 닫히는 부분이 정상작동하지 않습니다, 팝업이 열려있는 채 닫히지 않는 것으로 보아 online_layer의 display: none;과 online:checked+#online_layer의 display: flex가 작동하지 않는 것 같습니다. 혹시 이건 어떻게 하면 좋을까요??

답변을 작성하시기 전에 로그인 해주세요.
전체 15
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT