이미지 닫기버튼 만들기 채택완료
intercue
2년 전
조회 1,930
이미지 gif인데
여기에 닫기버튼
javascript btn.close 같은거 써서 닫고 싶은데요.
최대한 간단하게
img src에 직접 할수가 있나요?
아니면 div로 감싸고해야하려나...
고수님들 도와주십쇼 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
2년 전
</p>
<p><script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a></p>
<p><div>
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw01.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw01.svg"</a> width="200" height="200" />
<button type="button" onclick="$(this).prev().toggle()">닫기</button>
</div></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
i
intercue
2년 전
감사합니다 선생님 내일 해보겠습니다!
i
intercue
2년 전
이거 닫기가 되는데 img가 사라지고서 닫기는 남아있네요...ㄷㄷㄷ
댓글을 작성하려면 로그인이 필요합니다.
2년 전
답변 감사드립니다.
닫기버튼을 만드려면 HTML과 CSS, JavaScript를 사용해야 합니다. HTML과 CSS를 이용해 닫기 버튼의 모양을 만들고, JavaScript를 사용해 닫기 버튼을 클릭하면 이미지가 닫히도록 해야 합니다.
HTML에는 다음과 같이 코드를 작성합니다.
CSS는 다음과 같이 작성합니다.
.image-container {
position: relative;
}
.close-button {
position: absolute;
top: 0;
right: 0;
padding: 10px;
font-size: 20px;
background-color: #fff;
border: none;
cursor: pointer;
}그리고 JavaScript는 다음과 같이 작성합니다.
var closeButton = document.querySelector(".close-button");
closeButton.addEventListener("click", function(){
var imageContainer = document.querySelector(".image-container");
imageContainer.style.display = "none";
});이렇게 하면 닫기 버튼을 클릭하면 이미지가 사라집니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인