728x90
반응형
[HTML & CSS] 버튼 클릭하여 회원가입 폼 팝업창 띄우는 방법 !!
버튼 클릭하여 회원가입폼을 팝업창으로 띄우는 코드입니다 ㅎ
예제코드
<!DOCTYPE html>
<html>
<head>
<title>회원가입 팝업</title>
<style>
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease;
}
.popup-content {
width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.popup-content h2 {
text-align: center;
margin-top: 0;
}
.popup-content form {
display: flex;
flex-direction: column;
}
.popup-content input[type="text"],
.popup-content input[type="password"],
.popup-content input[type="email"],
.popup-content select {
margin-bottom: 10px;
padding: 8px;
border-radius: 3px;
border: 1px solid #ccc;
}
.popup-content input[type="submit"] {
padding: 8px 12px;
border: none;
border-radius: 3px;
background-color: #3f51b5;
color: #fff;
cursor: pointer;
}
.popup-content input[type="submit"]:hover {
background-color: #303f9f;
}
.popup-content .close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="openPopup()">회원가입</button>
<div id="popup" class="popup-overlay">
<div class="popup-content">
<span class="close-btn" onclick="closePopup()">×</span>
<h2>회원가입</h2>
<form>
<input type="text" placeholder="이름">
<input type="email" placeholder="이메일">
<input type="password" placeholder="비밀번호">
<select>
<option value="male">남성</option>
<option value="female">여성</option>
</select>
<input type="submit" value="가입">
</form>
</div>
</div>
</body>
</html>
<script>
function openPopup() {
var popup = document.getElementById("popup");
popup.style.visibility = "visible";
popup.style.opacity = "1";
}
function closePopup() {
var popup = document.getElementById("popup");
popup.style.visibility = "hidden";
popup.style.opacity = "0";
}
</script>결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & CSS] javascript를 활용하여 텍스트에 특수문자 제거하는 정규식 쓰는 방법 !! (0) | 2023.06.27 |
|---|---|
| [Html & CSS] javascript를 활용하여 input 태그에 value 값 넣는 방법 !! (0) | 2023.06.23 |
| [HTML & CSS] 태그로 활용하여 줄 바꿈, 띄어쓰기, 공백 하는 방법 !! (0) | 2023.05.06 |
| [HTML & CSS] meter 태그를 사용하여 그래프 그리는 방법 !! (0) | 2023.05.05 |
| [HTML & CSS] input태그 체크박스(checkbox) 상태 확인하는 방법 !! (0) | 2023.03.20 |
댓글