선생님... 그렇게 해도 전혀 작동이 되지 않는데 어떡하죠 로그인 창을 눌러도 모달창도 뜨지 않습니다
혹시 몰라 전체 코드 다시 첨부합니다
<body>
<div class="main-bg">
<h4>Shirts on sale</h4>
<button id="login" class="btn-show btn-danger">login</button>
</div>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input type="text" id="email" class="form-control">
</div>
<div class="my-3">
<input type="password" id="pw" 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>
<script>
$('.btn-show').on('click', function(){
$('.white-bg').addClass('show');
})
$('#close').on('click', function(){
$('.white-bg').removeClass('show');
})
$('.black-bg').on('click', function(){
$('.white-bg').removeClass('show');
})
$('form').on('submit', function(e){
const email = document.getElementById('email').value;
const pw = document.getElementById('pw').value;
if(email == '' || (/\S+@\S+\.\S+/).test(email) == false){
e.preventDefault();
alert('write your id');
} else if(pw == ''){
e.preventDefault();
alert('write your pw');
} else if(pw.length < 6){
e.preventDefault();
alert('write in down in more 6 letters');
} else if((/[A-Z]/).test(pw) == false){
e.preventDefault();
alert('Must contain at least one uppercase letter')
}
})
</script>
</body>
---------------------------------
css 파일
body{
margin: 0;
padding: 0;
}
.black-bg {
width : 100%;
height : 100%;
box-sizing: border-box;
position : fixed;
background-color: rgba(0, 0, 0, 0.3);
z-index : 5;
padding: 30px;
display: none;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.show{
display: block;
}
