이미지 모달 (고급)

이미지 모달 (고급)

이 예제는 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";

}