레이어로 팝업창을 띄우는게 필요하다. 알아 보니 다양하고 복잡한 방법도 있다. 쉽고 간단히 자바스크립트와 CSS을 이용해서 메일을 보내는 창을 띄워보자. 새로운 브라우저 탭을 여는 것이 아니라 미리 만들어 놓은 div를 숨겼다가 보여주는 방식이다.
버튼을 클릭하면 화면 전체에 메일폼이 뜨도록 하였다. 메일보내기는 실제 동작하지 않는다. php나 다른 방법으로 추가적으로 구현해 줘야 한다. 코드는 아래와 같이 하였다. 팝업창 모양을 잡아 주는 CSS가 내용이 길다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Popup Demo</title>
</head>
<style type="text/css">
body{
text-align: center;
display: block;
margin: 0 auto;
font-size: 16px;
color: #999;
}
h1{
font-family: 'Oswald', sans-serif;
font-size: 30px;
color: #216182;
}
label {
display: block;
margin-top: 20px;
letter-spacing: 2px;
}
form {
margin: 0 auto;
width: 459px;
}
input, textarea {
width: 439px;
height: 27px;
background-color: #efefef;
border-radius: 6px;
border: 1px solid #dedede;
padding: 10px;
margin-top: 3px;
font-size: 0.9em;
color: #3a3a3a;
}
input:focus, textarea:focus{
border: 1px solid #97d6eb;
}
textarea{
height: 60px;
background-color: #efefef;
}
#submit{
width: 127px;
height: 48px;
text-align: center;
border: none;
margin-top: 20px;
cursor: pointer;
}
#submit:hover{
color: #fff;
background-color: #216282;
opacity: 0.9;
}
#cancel {
width: 127px; height: 48px;
text-align: center;
border: none;
margin-top: 20px;
cursor: pointer;
}
#cancel:hover{
color: #fff;
background-color: #216282;
opacity: 0.9;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 500px;
height: 350px;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
</style>
<body>
<h1>레어어 팝업창 띄우기</h1>
<!-- 버튼 -->
<button class="trigger">이메일 보내기</button>
<!-- 팝업 될 레이어 -->
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1 class="title">메일 보내기</h1>
<form action="#post.php" method="POST">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Your email" required="required">
<label></label>
<textarea name="message" placeholder="Test Message" required="required"></textarea>
<input type="button" id="cancel" value="취소">
<input type="submit" id="submit" value="보내기">
</form>
</div>
</div>
<script type="text/javascript">
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
var cancelButton = document.querySelector("#cancel");
//console.log(modal);
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
cancel.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
</body>
</html>
예제 데모는 아래 링크를 참조 하자. 이걸 다음에 써 먹자.
