작성
·
287
답변 2
0
안녕하세요! 답변이 늦었습니다.
문의주신 내용은 show/hide 기능중 lightbox를 이용하시면 해결될 것 같은데요.
아래 강의 링크에서 3:26 구간을 참고해보시겠어요?
혹시 문의주신 질문이 이 내용이 아니었다면 추가질문 부탁드려요 :)
0
안녕하세요, 인프런 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” 버튼을 클릭하면 이미지를 보여주는 모달 창이 나타나고, “×” 버튼을 클릭하면 모달 창이 숨겨지도록 구현되어 있습니다. 또한, 배경을 클릭하면 모달 창도 숨겨지도록 설정되어 있습니다.
이 코드를 참고하여 원하시는 기능을 구현해보세요. 직접 코드를 실행해서 확인해보시면 될 것 같아요.
여러분이 원하는 디자인에 맞게 스타일링을 적용하고, 이미지 경로를 수정해주시면 될 것 같습니다.
다른 궁금한 사항이 있으면 언제든 물어보세요. 좋은 하루 되세요!
ㅠㅠ답변 감사합니다. 진짜 다시 질문을 보니 이걸 왜 질문했지..?하는 생각이..드네요 ㅠㅜ 늘 친절한 답변 감사합니다~ 태풍이 곧 온다는데 주의하시어 이번주도 잘 보내시기 바랍니다!!