modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
#wrap {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* ul 가운데 두기 위해 */
}
ul {
width: 70%;
display: flex;
}
ul li {
width: 25%;
}
ul li img {
width: 100%;
}
#imgView {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
#imgView span {
position: absolute;
right: 100px;
top : 100px;
color: #fff;
font-size: 48px;
}
</style>
</head>
<body>
<div>
<div id="wrap">
<ul>
<li> <img src="../img/img_lights1.jpg" alt="첫번째 이미지 입니다." onclick="viewImg(this)"> </li>
<li> <img src="../img/img_lights2.jpg" alt="두번째 이미지 입니다." onclick="viewImg(this)"> </li>
<li> <img src="../img/img_lights3.jpg" alt="세번째 이미지 입니다." onclick="viewImg(this)"> </li>
<li> <img src="../img/img_lights4.jpg" alt="네번째 이미지 입니다." onclick="viewImg(this)"> </li>
</ul>
</div>
<div id="imgView">
<span onclick="hideDiv()">X</span>
<img src="../img/img_lights1.jpg" alt="" id="bigImg">
<!-- 이 이미지를 바꿔야됨, 선택 가능해야됨 -->
<p>첫번째 이미지 입니다.</p>
</div>
</div>
<script>
function viewImg(img) {
let imgSrc = img.src; // 변수에 담기
document.querySelector('#imgView').style.display = 'flex'; // none으로 되어있으니
document.querySelector('#bigImg').src = imgSrc;
document.querySelector('p').innerHTML = img.alt; // 클릭하면 p태그를 alt 값으로 넣어줘
console.log(img.src);
console.log(img.alt);
}
function hideDiv() { // X 클릭하면 없어지게
document.querySelector('#imgView').style.display = 'none';
}
</script>
</body>
</html>
