4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2023년 2월 6일 23:02 #67129
주태헌참가자선생님 똑같이 한거 가튼데 alert('아이디입력안함) 박스가 안나오네요. 어디가 잘못되어 있나요. index.html<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="main.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<title>Hello, world!</title> </head>
<body>
<div class="black-bg"> <div class="white-bg"> <h4>로그인하세요</h4> <form action="success.html"> <div class="my-3"> <input type="text" class="form-control" id="email"> </div> <div class="my-3"> <input type="password" class="form-control"> </div> <button type="submit" class="btn btn-primary">전송</button> <button type="button" class="btn btn-danger" id="close">닫기</button> </form> </div> </div>
<div class="main-bg"> <h4>Shirts on Sale</h4> <button id="login" class="btn btn-danger">로그인</button> </div>
<script> $('#form').on('submit', function() { if (document.getElementById('email').value == '') { alert('아이디입력안함'); } });// UI에 애니메이션 추가하려면 $('#login').on('click', function() { $('.black-bg').addClass('show-modal'); });// 닫을때 ok, removeClass 사용하면 여러번 됨 $('#close').on('click', function() { $('.black-bg').removeClass('show-modal'); }); </script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body></html> main.css .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; /* display: block;*/ display: none; }.list-group { display: none; }.show { display: block; }/*숙제*/ .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.5); z-index: 5; padding: 30px; /* display: none;*/ visibility: hidden; opacity: 0; transition: all 1s; }.white-bg { background: white; border-radius: 5px; padding: 30px; }.btn-danger { display: none; }.show-modal { /* display: block;*/ visibility: visible; opacity: 1;}
.btn { display: block; }.none { display: none; }.main-bg { padding: 100px 20px; background-color: lightgrey; } success.html 전송완료~~~ -
글쓴이글
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.