3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
글쓴이글
-
2023년 9월 6일 17:41 #97116
Sony참가자안녕하세요 선생님! 전송버튼을 눌렀을 때 아이디에 alert이 안뜨고 바로 성공페이지로 넘어갑니다 어디에 문제가 있는건지 잘 모르겠습니다ㅜ ----------HTML-------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="./main.css"> </head> <body>
<div class="black-bg show-modal"> <div class="white-bg"> <h4>로그인하세요</h4> <form action="succes.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" id="send">전송</button> <button type="button" class="btn btn-danger" id="close">닫기</button> </form> </div> </div>
<nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand">Navbar</span> <button class="navbar-toggler" id="togleBtn" type="button"> <span class="navbar-toggler-icon"></span> </button> </div> </nav>
<ul class="list-group show"> <li class="list-group-item">An item <li class="list-group-item">A second item <li class="list-group-item">A third item <li class="list-group-item">A fourth item <li class="list-group-item">And a fifth one
<div class="main-bg"> <h4>Shirts on Sale</h4> <button id="login" class="btn btn-danger" id="login">로그인</button> </div>
<script> /*토글버튼*/ $('.navbar-toggler').on('click', function(){ $('.list-group')[0].classList.toggle('show'); })$('#togleBtn').on('click', function(){ $('.list-group').toggleClass('down') })/*로그인버튼*/ $('#login').on('click', function(){ $('.black-bg').addClass('show-modal'); $('black-bg').css('transform', 'translateY(100px)') })/*닫기버튼*/ $('#close').on('click', function(){ $('.black-bg').removeClass('show-modal'); $('black-bg').css('transform', 'translateY(0px)') })/*form id*/ $('#send').on('submit', function(e) { if (document.getElementById('email').value == '') { alert('아이디입력안함'); e.preventDefault(); } }); </script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body> </html> ----------CSS-------------------------------------------------------------
.black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; display: none; opacity: 0; transition: all 1s; } .white-bg { background: white; border-radius: 5px; padding: 30px; }.show-modal{ display: block; opacity: 1; }.list-group{ display: none; transition: all 1s; }.show{ display: block; opacity: 1; }.main-bg{ background-color: gray; color: white; padding: 100px 0px 100px 10px; } -
글쓴이글
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.