팝업창 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가 작동하지 않는 것 같습니다. 혹시 이건 어떻게 하면 좋을까요??
