* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
자바스크립트에서 alert() 함수를 사용하면 대화상자를 팝업하는데 그걸 팝업상자의 확인 버튼을 누르면 없어지는데 이걸 확인버튼만 누르는게 아니라 외부 아무화면이나 누르면 닫기게 하고싶은데 방법이있을까요?
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="ko">
<head>
<title>인생이 심하게 꼬여버린새끼</title>
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@font-face {
font-family: "LeeSeoyun";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff") format("woff");
font-weight: normal;
font-style: normal;
}
body {
font-family: "LeeSeoYun";
margin: 0;
display: flex;
justify-content: center;
background-image: url("http://drive.google.com/uc?export=view&id=1vm1xFtPs1r7jPTddHevSCjq0H9xFKkxH");
background-size: cover;
background-repeat: no-repeats;
}
.container {
width: 600px;
background-color: #fb8654;
height: 100%;
}
.photos {
margin-top: 30px;
}
.photo-frame {
background-color: white;
margin: 15px 20px;
height: 300px;
background-repeat: no-repeat;
position: relative;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
}
.f-title {
color: white;
font-size: 25px;
font-weight: 900;
}
.f-date {
color: white;
font-size: 15px;
font-weight: 500;
}
#image1 {
background-image: url(https://d2gd6pc034wcta.cloudfront.net/images/logo@2x.png);
background-position-y: center;
background-position-x: center;
}
#image2 {
background-image: url(http://drive.google.com/uc?export=view&id=1P2geZfQ8oCEDA4pT6mivYICnN_mhjdVi);
background-position-y: center;
background-position-x: center;
background-size: cover;
}
#image3 {
background-image: url(http://drive.google.com/uc?export=view&id=1P7KQN1_Y9im4R5DvXTkvvlGOAuIjPCE9);
background-position-y: center;
background-position-x: center;
background-size: cover;
}
#image4 {
background-image: url(http://drive.google.com/uc?export=view&id=1jaqE1Zy6I7MrGD-QscfDVROktMDcpNrP);
background-position-y: center;
background-position-x: left;
background-size: cover;
background-size: 125%;
}
.photo_description {
color: white;
background-color: black;
width: fit-content;
padding: 0 20px;
margin-bottom: 10px;
border-radius: 10px;
position: absolute;
bottom: 0;
transform: translate(-50%);
left: 50%;
opacity: 0;
}
.showText {
opacity: 1;
transition: opacity 0.5s linear;
}
.hideText {
opacity: 0;
}
</style>
<script>
function showText(number) {
if (number === 1) {
document.querySelector("#desc1").classList.remove("hideText");
document.querySelector("#desc1").classList.add("showText");
} else if (number === 2) {
document.querySelector("#desc2").classList.remove("hideText");
document.querySelector("#desc2").classList.add("showText");
} else if (number === 3) {
document.querySelector("#desc3").classList.remove("hideText");
document.querySelector("#desc3").classList.add("showText");
} else{
document.querySelector("#desc4").classList.remove("hideText");
document.querySelector("#desc4").classList.add("showText");}
}
function hideText(number) {
if (number === 1) {
document.querySelector("#desc1").classList.remove("showText");
document.querySelector("#desc1").classList.add("hideText");
} else if (number === 2) {
document.querySelector("#desc2").classList.remove("showText");
document.querySelector("#desc2").classList.add("hideText");
} else if (number === 3){
document.querySelector("#desc3").classList.remove("showText");
document.querySelector("#desc3").classList.add("hideText");
}else {
document.querySelector("#desc4").classList.remove("showText");
document.querySelector("#desc4").classList.add("hideText");
}
}
function alertText(number) {
alert(`${number}번째 추억이에요! 눌러주셔서 감사합니다 :)`);
}
</script>
</head>
<body>
<div class="container">
<div class="photos">
<a href="https://www.acmicpc.net/user/rlatjdals104" target="_blank">
<div id="image1" class="photo-frame" onmouseover="showText(1)" onmouseout="hideText(1)"
onclick="alertText(1)"><span id="desc1" class="photo_description">파이썬 원툴의 발자취</span></div>
</a>
<div id="image2" class="photo-frame" onmouseover="showText(2)" onmouseout="hideText(2)"
onclick="alertText(2)"><span id="desc2" class="photo_description">벚꽃</span></div>
<div id="image3" class="photo-frame" onmouseover="showText(3)" onmouseout="hideText(3)"
onclick="alertText(3)"><span id="desc3" class="photo_description">전역</span></div>
<a href="https://github.com/d982h8st7/underconstruction/blob/main/web"target="_blank"><div id="image4" class="photo-frame"
onmouseover="showText(4)"
onmouseout="hideText(4)"
onclick="alertText(4)"><span id="desc4" class="photo_description">이 웹페이지를 만드는 과정</span></div></a>
</div>
<div class="footer">
<p class="f-title">Endeavor to Full stack Engineer</p>
<p class="f-title" title="역경을 딛고 별이 되어">Per aspera ad astra</p>
<p class="f-date">2023.03.26</p>
<p class="f-date"><a href="https://github.com/d982h8st7" target="_blank"><img
src="http://drive.google.com/uc?export=view&id=1fNPUKe82cptFZF8iSGe0wlvIk9foFG-R"
style="width: 10%; margin-left : 40%"></a>
<a href="https://www.instagram.com/sin_nar_ver/" target="_blank"><img
src="http://drive.google.com/uc?export=view&id=1pIBi0iPOtNVd1mcsP1ZzGATa5G1k-Zyp"
style="width:12%;margin: left 10px;"></a>
</p>
</div>
</div>
</div>
</body>
</html>
