-
글쓴이글
-
2021년 1월 18일 01:23 #6102
장윤경참가자안녕하세요. 장윤경 학생입니다.
애니메이션 UI 2 강의에서 영상 마지막 부분에
$('#login').on('click', function() {
$('.black-background').addClass('slide-down');
});이렇게 하면 효율적으로 코드 구현이 가능하다고 해서 했는데 로그인 버튼을 누르면 로그인 창이 나타나지 않습니다.
영상 설명대로라면 구현이 되야하는데 안되서 무엇이 문제인지 알려주실수있을까요?
로그인 창에 css class 2개를 추가한 상태인데요
.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)
}도와주시면 감사하겠습니다 !!!
2021년 1월 18일 09:53 #6104
codingapple키 마스터css js는 별 문제 없어보입니다 .black-background 요소에 이미 .slide-down도 부여가 되어있거나
.slide-down이라는 클래스정의를 css파일 맨밑으로 옮겨보시거나
jquery가 위에 설치가 안되어있거나
이런 문제들 같은데여 개발자도구 열어봐야합니다
2021년 1월 18일 10:33 #6105
장윤경참가자선생님. 죄송합니다만 아무리봐도 제 코드에 어떤 오류가 있는건지 제눈에는 안보입니다.
혹시 전체 코드 파일 올려주실 수 있을까요? 제가 직접 보고 비교해보려고 합니다.
만약 안되시면 제 코드를 올려드리면 뭐가 문제인지 찾아봐주실수 있을까요?
=====================================================================================
<!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 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="/resources/css/bootstrap.css">
<script type="text/javascript" src="/resources/js/bootstrap.*.js"></script> -->
<link href="main.css" rel="stylesheet"><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="password">
<p id="password-alert">비번이 공백입니다.</p>
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div><div class="nav-menu">
<h4 style="margin: 0">Shirts 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">Shirts Studio</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" href="#" role="button">Log
In</a> <a id="show-menu" class="btn btn-danger btn-lg" role="button">Show
Menu</a>
</div><script>
//어.. showMenu 버튼 누르면 저 메뉴가 왼쪽에서 슬그머니 등장
$('#show-menu').click(function(){
$('.left-menu').animate({ marginLeft: '0px'}, 1000);});
var 이메일안내창 = $('email-alert');$('form').on('submit', function(e) {
var 입력한이메일 = $('#email').val();
var 검증정규표현식 = /\S+@\S+\.\S+/;
if(검증정규표현식.test(입력한이메일) ==false){
e.preventDefault();
}else if(입력한이메일==''){
e.preventDefault();
}
var 입력한비번= $('#password').val();
if(/[A-Z]+/.test(입력한비번)==false){
e.preventDefault();
}});
// if ($('#email').val()== '') {
// e.preventDefault();
// 이메일안내창.show();
// } else if ($('#password').val() == '') {
// e.preventDefault();
// $('#password-alert').show();
// }$('#email').on('input', function() {
$('#email-alert').show();});
$('#nav-sub-button').click(function() {
$('.nav-sub').slideToggle();
});$('#close').on('click', function() {
$('.black-background').fadeOut();
});$('#login').on('click', function() {
$('.black-background').addClass('slide-down');
});var 이름 = 'Daphne';
var 나이 = 20;
// /\S+@\S+\.\S+/.test('dsd@dsd.com');</script>
<!-- Optional JavaScript; choose one of the two! -->
</body>
</html>
=============================
.alert-box {
background: #9292d1;
color: #5a5abf;
padding:20px;
border-radius: 5px;
display:none;
}.alert-box p{
display: inline;
}.yellow-bg{
background: yellow;}
.main-background {
background-image: url(person.jpg);
background-size: cover;
color:white;
border-radius:0px;
padding-left: 20px;
}.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);
}.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;
}.list-group-sub {
display:none;
}.nav-sub {
display:none;
}.form-group {
margin-bottom: 10px;
}#email-alert {
display: none;
}#password-alert {
display: none;
}.left-menu {
width:150px;
height:100%;
background: black;
color:white;
position:fixed;
margin-left:-150px;
}.btn-lg {
margin-bottom: 20px;
}.slide-down {
transform: translateY(0px);
}
================================bracket 으로 사용하다가 보는게 불편하고 사용법이 익숙치 않아서 이클립스로 바꿔서 사용중입니다. 초보자라 죄송합니다.
2021년 3월 5일 09:54 #6994
codingapple키 마스터.black-background 요소에 이미 .slide-down 클래스가 이미 부여가 되어있거나
.slide-down이라는 클래스정의를 css파일 맨밑으로 옮겨보시거나
jquery가 위에 설치가 안되어있거나 중 하나일 겁니다
그외는 문법에러입니다
-
글쓴이글
- 답변은 로그인 후 가능합니다.