사용: HTML, CSS, Javascript
버튼 (열기)을 클릭하면 간단한 알림 UI가 나타나고
버튼 (닫기)을 클릭하면 UI가 사라지는 매우 간단한 코드를 작성해보았다.
근데 기존 function 2개를 하나로 줄여서 만들었다.
// index.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>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">알림창</p>
<button onclick="openAlert()">닫기</button>
</div>
<button onclick="alert('아이디를 입력하세요')">버튼1</button>
<button onclick="alert('비밀번호를 입력하세요')">버튼2</button>
<script>
function openAlert(){
document.getElementById('alert').style.display = 'none';
}
function alert(hangeul){
document.getElementById('title').innerHTML = hangeul;
document.getElementById('alert').style.display = 'block';
}
</script>
</body>
</html>// main.css
.alert-box {
background-color: green;
padding: 20px;
color: white;
border-radius:5px;
display: block;
}
데이터로 세상을 쓰고 읽고 싶은 헤븐리뷰입니다.