이미지 모달 (고급) 정보
CSS 이미지 모달 (고급)본문
이미지 모달 (고급)
이 예제는 CSS와 JavaScript가 함께 작동하는 방법을 보여줍니다.
먼저 CSS를 사용하여 모달 창 (대화 상자)을 만들고 기본적으로 숨 깁니다.
그런 다음 JavaScript를 사용하여 모달 창을 표시하고 사용자가 이미지를 클릭하면 모달 안에 이미지가 표시됩니다.
노던 라이트, 노르웨이
예
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
0
댓글 0개