css 소스
.alert-box {
background : red;
color : black;
padding : 10px;
border-radius : 5px;
display : none;
}html 소스
<html>
<head>
<link rel="stylesheet" href ="css파일경로">
</head>
<body>
<div class="alert-box" id="alert">
<p>알림내용</p>
<button onclick ="AlertClose()"> 닫기</button>
</div>
<button onclick ="AlertOpen()"> 열기</button>
<script>
function AlertOpen() {
document.getElementById('alert').style.display='block';
}
function AlertClose() {
document.getElementById('alert').style.display='none';
}
</script>
</body>
</html>html 읽고 스크립트를 실행하기 때문에 조작하고자하는 html보다 스크립트 내용이 먼저오면 안됨!
리팩토링
<body>
<div class="alert-box" id="alert">
<p>알림내용</p>
<button onclick ="AlertOpenClose('none')"> 닫기</button>
</div>
<button onclick ="AlertOpenClose('block')"> 열기</button>
<script>
function AlertOpenClose(param) {
document.getElementById('alert').style.display= param;
}
</script>
</body>활용
<body>
<div class="alert-box" id="alert">
<p id="title">알림내용</p>
<button onclick ="AlertOpenClose('none','')"> 닫기</button>
</div>
<button onclick ="AlertOpenClose('block','아이디를 입력하세요')"> 열기1</button>
<button onclick ="AlertOpenClose('block','패스워드를 입력하세요')"> 열기2</button>
<script>
function AlertOpenClose(param,param2) {
document.getElementById('title').innerHTML = param2;
document.getElementById('alert').style.display= param;
}
</script>
</body>활용2
<body>
<div class="alert-box" id="alert">
<p id="title">알림내용</p>
<button id="close"> 닫기</button>
</div>
<button onclick ="AlertOpenClose('block','아이디를 입력하세요')"> 열기1</button>
<button onclick ="AlertOpenClose('block','패스워드를 입력하세요')"> 열기2</button>
<script>
document.getElementById('close').addEventListener('click',function(){
document.getElementByid('alert').style.display='none';
});
function AlertOpenClose(param,param2) {
document.getElementById('title').innerHTML = param2;
document.getElementById('alert').style.display= param;
}
</script>
</body>
'개발언어 > SPNIPPET' 카테고리의 다른 글
| [Jquery] AJAX 통신 (0) | 2022.08.16 |
|---|