-
개발일지샤자의 개발일지/JavaScript, jQuery 2022. 12. 3. 12:16728x90
개발일지 2일차 입니다.
간단하게 Alert 박스를 만들어서 아이디와 비밀번호를 만드는 박스를 열고
이를 닫는 코드를 복습해 봤습니다.
1. 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
<button id="close"> X </button>
</div>
<button onclick="알림창1열기('아이디입력해라')">버튼1</button>
<button onclick="알림창1열기('비번입력해라')">버튼2</button>
<script>
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none';
});
function 알림창1열기(구멍){
// 1.제목바꾸기
document.getElementById('title').innerHTML = 구멍;
// 2.열기
document.getElementById('alert').style.display = 'block';
}
// function 알림창2열기(){
// 1.제목바꾸기
// document.getElementById('title').innerHTML = '비밀번호입력하세요';
// 2.열기
// document.getElementById('alert').style.display = 'block';
// }
</script>
</body>
</html>2. 화면
버튼1을 누르면 창이나오고 x를 누르면 창이 닫힘니다. 
버튼2을 누르면 창이나오고 x를 누르면 창이 닫힘니다. 728x90'샤자의 개발일지 > JavaScript, jQuery' 카테고리의 다른 글
클릭 이벤트 새 창으로 열리게 변경 (0) 2025.04.22 JSP에서 특정 값이 없을 때는 0을 출력하고, 값이 있을 때는 그 값을 출력하는 조건식 (0) 2025.04.04 JSP에서 다른 화면으로 링크를 통해 이동하면서 데이터를 넘겨받기 (0) 2025.04.03 SELECT 박스에서 선택한 값 데이터 요청 전송 (0) 2025.04.01