<!DOCTYPE html>
<html>
<head>
<style>
#myForm{
display: none; //숨길수 있도록자리 잡기
}
form .btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
width: 100px;
margin-bottom: 10px;
margin-top: 10px;
}
button.btn:hover {
opacity: 0.8;
color: yellow;
}
.cancel:hover {
opacity: 0.8;
background: red;
}
</style>
</head>
<body>
<h2>로그인을 클릭하면 로그인 폼이 나타납니다.</h2>
<button class="open">로그인</button>
<div class="form-popup" id="myForm">
<form action="result.html" method="post">
<fieldset>
<legend>로그인</legend>
<h1>Login</h1>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<br>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<br>
<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel">Close</button>
</fieldset>
</form>
</div>
<script>
$('label').css({'display':'inline-block', 'width': '80px'});
$(".open").click(function(){
$("#myForm").css('display', 'block'); //클릭시 디스플레이 나타내기
});
$(".cancel").click(function(){
$("#myForm").css('display', 'none'); //클릭시 디스플레이 숨기기
});
</script>
'JQUERY > 예제들' 카테고리의 다른 글
| div숨기기 예제 문제 (0) | 2022.08.26 |
|---|---|
| chenk값 예제 : 모든항목 선택문제 (0) | 2022.08.26 |
| split("") 빈칸기준 .reverse() 정렬 .join("") 합치고; (0) | 2022.08.25 |
| 객체정보를 prompt받아 for으로 테이블에 출력되는 배열 (0) | 2022.08.25 |
| 회원가입 창만들기 (0) | 2022.08.25 |