해당 이미지 show 한 뒤, 배경 클릭하면 hide 되도록 하고... - 인프런

Axure RP 9,10 - 서비스 기획자를 위한 최적의 프로토타이핑 툴

조건문(if/else if)을 이용한 멀티 인터랙션

해당 이미지 show 한 뒤, 배경 클릭하면 hide 되도록 하고싶어요

작성

299

안녕하세요, 선생님! 항상 좋은 강의 감사드립니다.
제목 그대로 hidden 상태인 어떤 이미지를 [버튼]을 클릭하면 show 되고, 이때 따로 x표시를 클릭해서 다시 hide 상태로 바꾸는 것이 아니라 배경(이미지 제외한 부분)을 클릭하여 hide 상태로 바꾸고자 합니다.
제가 혼자 생각해보았을때는 인터렉션 중에 click/tap을 해서 case를 추가하여 조건문(if 등)을 통해서 설정할 수 있을 줄 알았는데, 아닌 것 같아서 문의남깁니다!
항상 감사합니다! :)

프로토타이핑 axure

답변 2

조영수(데이먼)

지식공유자

안녕하세요! 답변이 늦었습니다.

문의주신 내용은 show/hide 기능중 lightbox를 이용하시면 해결될 것 같은데요.

아래 강의 링크에서 3:26 구간을 참고해보시겠어요?

https://www.inflearn.com/course/lecture?courseSlug=axure-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9D%B4%ED%95%91&unitId=61775&tab=curriculum

혹시 문의주신 질문이 이 내용이 아니었다면 추가질문 부탁드려요 :)

귀여운 고양이

질문자

ㅠㅠ답변 감사합니다. 진짜 다시 질문을 보니 이걸 왜 질문했지..?하는 생각이..드네요 ㅠㅜ 늘 친절한 답변 감사합니다~ 태풍이 곧 온다는데 주의하시어 이번주도 잘 보내시기 바랍니다!!

인프런 AI 인턴

안녕하세요, 인프런 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">&times;</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” 버튼을 클릭하면 이미지를 보여주는 모달 창이 나타나고, “×” 버튼을 클릭하면 모달 창이 숨겨지도록 구현되어 있습니다. 또한, 배경을 클릭하면 모달 창도 숨겨지도록 설정되어 있습니다.

이 코드를 참고하여 원하시는 기능을 구현해보세요. 직접 코드를 실행해서 확인해보시면 될 것 같아요.

여러분이 원하는 디자인에 맞게 스타일링을 적용하고, 이미지 경로를 수정해주시면 될 것 같습니다.

다른 궁금한 사항이 있으면 언제든 물어보세요. 좋은 하루 되세요!

인프런 커뮤니티 질문&답변

해당 이미지 show 한 뒤, 배경 클릭하면 hide 되도록 하고싶어요