-
질문 & 답변
카테고리
-
세부 분야
기획 · 전략 · PM
-
해결 여부
미해결
해당 이미지 show 한 뒤, 배경 클릭하면 hide 되도록 하고싶어요
23.07.24 16:57 작성 조회수 152
0
안녕하세요, 선생님! 항상 좋은 강의 감사드립니다.
제목 그대로 hidden 상태인 어떤 이미지를 [버튼]을 클릭하면 show 되고, 이때 따로 x표시를 클릭해서 다시 hide 상태로 바꾸는 것이 아니라 배경(이미지 제외한 부분)을 클릭하여 hide 상태로 바꾸고자 합니다.
제가 혼자 생각해보았을때는 인터렉션 중에 click/tap을 해서 case를 추가하여 조건문(if 등)을 통해서 설정할 수 있을 줄 알았는데, 아닌 것 같아서 문의남깁니다!
항상 감사합니다! :)
답변을 작성해보세요.
0
기획자 데이먼
지식공유자2023.08.04
안녕하세요! 답변이 늦었습니다.
문의주신 내용은 show/hide 기능중 lightbox를 이용하시면 해결될 것 같은데요.
아래 강의 링크에서 3:26 구간을 참고해보시겠어요?
혹시 문의주신 질문이 이 내용이 아니었다면 추가질문 부탁드려요 :)
귀여운 고양이
질문자2023.08.09
ㅠㅠ답변 감사합니다. 진짜 다시 질문을 보니 이걸 왜 질문했지..?하는 생각이..드네요 ㅠㅜ 늘 친절한 답변 감사합니다~ 태풍이 곧 온다는데 주의하시어 이번주도 잘 보내시기 바랍니다!!
0
인프런 AI 인턴
2023.07.26
안녕하세요, 인프런 AI 인턴이에요.
해당 이미지를 show 한 뒤, 배경 클릭 시 hide 되는 기능을 구현하고 싶으시군요. 그렇다면 자바스크립트를 이용해서 이벤트를 처리하면 됩니다.
제가 간단한 코드 예시를 작성해보았는데요.
<!DOCTYPE html>
<html>
<head>
<style>
#myModal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
#myModal img {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#myModal.hidden {
display: none;
}
</style>
</head>
<body>
<button onclick="showModal()">Show Image</button>
<div id="myModal" class="hidden">
<span onclick="hideModal()" class="close">×</span>
<img src="image.jpg" alt="Image">
</div>
<script>
function showModal() {
document.getElementById("myModal").classList.remove("hidden");
}
function hideModal() {
document.getElementById("myModal").classList.add("hidden");
}
var modal = document.getElementById("myModal");
window.onclick = function(event) {
if (event.target == modal) {
hideModal();
}
}
</script>
</body>
</html>
위 코드에서는 “Show Image” 버튼을 클릭하면 이미지를 보여주는 모달 창이 나타나고, “×” 버튼을 클릭하면 모달 창이 숨겨지도록 구현되어 있습니다. 또한, 배경을 클릭하면 모달 창도 숨겨지도록 설정되어 있습니다.
이 코드를 참고하여 원하시는 기능을 구현해보세요. 직접 코드를 실행해서 확인해보시면 될 것 같아요.
여러분이 원하는 디자인에 맞게 스타일링을 적용하고, 이미지 경로를 수정해주시면 될 것 같습니다.
다른 궁금한 사항이 있으면 언제든 물어보세요. 좋은 하루 되세요!
답변 2