-
'애니메이션 UI 2 : Slide Down 모달창 만들기 & 애니메이션 필수 팁' 강좌에서 그대로 따라하였는데 실행이 잘 되질 않아 질문올렸습니다.
html코드
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Hello, world!</title>
</head>
<body>
<div class="left-menu">
<p>Menu Title</p>
</div>
<div class="black-background slide-down">
<div class="white-background">
<p>로그인하세요</p>
<form action="login.php">
<div class="form-group">
<input
type="email"
class="form-control"
placeholder="Email"
id="email"
/>
<p id="email-alert">이메일이 빈칸입니다.</p>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
placeholder="Password"
id="psw"
/>
<p id="psw-alert">패스워드가 빈칸입니다</p>
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button id="close-button" style="background-color: red">닫기</button>
</form>
</div>
</div>
<div class="nav-menu">
<h4 style="margin: 0">coffe studio</h4>
<a id="nav-sub-button">Products</a>
</div>
<ul class="list-group nav-sub">
<li class="list-group-item">Outer</li>
<li class="list-group-item">Innerwear</li>
<li class="list-group-item">Shirts</li>
</ul>
<div class="jumbotron main-background">
<h1 class="display-4">do you like coffee?</h1>
<p class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-4" />
<p>
It uses utility classes for typography and spacing to space content out
within the larger container.
</p>
<a id="login" class="btn btn-primary btn-lg" role="button">Login</a>
<a id="show-menu" class="btn btn-danger btn-lg" role="button"
>Show Menu</a
>
</div>
<script>
$("#show-menu").click(function () {
$(".left-menu").animate({ marginLeft: "0px" });
});
</script><script>
$("#login").on("click", function () {
$(".black-background").addClass("slide-down");
});$("#nav-sub-button").on("click", function () {
$(".nav-sub").slideToggle();
});
$("#close-button").on("click", function () {
$(".black-background").hide();
});
$("form").on("submit", function (e) {
const = emailVal = $("#email").val();
if(/\S+@\S+\/\S+/.test(emailVal)==false){
e.preventDefault();
} else if(emailVal==''){
e.preventDefault();
}
//패스워드 공백확인
const = emailPsw = $("#psw").val();
if(/[A=Z]+/.test(emailPsw)== false){
e.preventDefault();
}
// if ($("#email").val() == "") {
// e.preventDefault();
// $("#email-alert").show();
// } else if ($("#psw").val() == "") {
// e.preventDefault();
// $("#psw-alert").show();
// }
});/abc/.test("abvcvsdfd");
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
</body>
</html>css코드
.alert {
background-color: rgb(128, 128, 223);
color: rgb(10, 10, 17);
padding: 20px;
border-radius: 5px;
display: none;
}
.main-background {
background: url(photo.jpg);
color: black;
background-size: cover;
border-radius: 0px;
}
.black-background {
background: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 5;
width: 100%;
height: 100%;
display: block;
transition: all 1s;
transform: translateY(-1000px);
}
.slide-down {
transform: translateY(0px);
}
.white-background {
background: white;
width: 80%;
margin: 100px auto;
padding: 20px;
border-radius: 10px;
}
.nav-menu {
display: flex;
justify-content: space-between;
padding: 15px;
align-items: center;
}
.nav-sub {
display: none;
}
#email-alert {
display: none;
}
#password-alert {
display: none;
}
.left-menu {
width: 150px;
height: 100%;
background-color: black;
color: white;
position: fixed;
margin-left: -150px;
}
원래대로라면 로그인버튼을 누르면 모달창이 내려와야 하지만 제화면은
이런식으로 애초에 모달창이 내려와있는 상태로 시작이됩니다.
또한 저상태에서 닫기버튼을 누르게되면 닫혀야하지만
login.php라고 뜨면서 저런 화면이 뜨는데
이 2가지 오류를 어떻게 해결해야하나요?
- 답변은 로그인 후 가능합니다.