Forum : Modal slide in and slide out after X click

hello,
hope someone will help me.

I have a div with span, this span after when gets clicked triggers modal which slides in from the right to the center, however I dont know how to make closing procedure with the sliding reverse animation ? so basically when you click on the close button it will slide out off the container.

codepen source from W3C MODAL
ShowBox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<section class="section start-project-home">
<div class="container">
<div class="columns">
<div class="column">
<div class="project-wrap">
<h2>Want start project ?</h2>
<p><span id="btnhomeModal" class="modal-click-send-home">send</span> a request </p>
</div>
</div>
</div>
</div>

<div class="modal-content">
<span class="close">×</span>
<div class="contact-form-heading-modal">
<h6>How may I help you?</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, pariatur fugiat iusto voluptatem officiis eaque expedita aliquam ea nesciunt impedit minus? Rerum beatae vel provident hic quidem autem corporis unde.</p>
</div>
Nox
<form class="form-block" action="https://formspree.io/@gmail.com"
method="POST">
<div class="subject-wrap">
<label>Interested In...</label>
<select class="closed-selection" name="Subject">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>

<div class="form-wrapper-r">
<label>Email Address</label>
<input type="email" name="_replyto">
</div>

<div class="bottom-contact-wrap">
<label>Description</label>
<textarea class="desc-modal" name="message"></textarea>
<input type="submit" value="Send Request">
</div>

</form>
</div>

</div>
</body>
</html>
CSS
VidMate
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-size:16px;
font-family: 'Raleway', sans-serif !important;
font-weight: inherit;
line-height: inherit;

}

/ The Modal (background) /
.modal {
display: none; / Hidden by default /
position: fixed; / Stay in place /
z-index: 1; / Sit on top /
left: 0;
top: 0;
width: 100%; / Full width /
height: 100%; / Full height /
overflow: auto; / Enable scroll if needed /
background-color: rgb(0,0,0); / Fallback color /
background-color: rgba(0,0,0,0.4); / Black w/ opacity /
}

/ Modal Content/Box /
.modal-content {
margin: 0 auto;
height: 170vh;
max-height: 100vh;
padding: 0;
width: 65%;
float: right;
background: #fff;
animation-name: animatetop;
animation-duration: 0.45s
}

.modal-card, .modal-content {
max-height: 100vh !important;
width: 65vw !important;
}

/ The Close Button /
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/ Add Animation /
@keyframes animatetop {
from {right: -1200px;}
to {right: 0;}
}

.project-wrap {
text-align: center;
font-size: 61px;
font-weight: 900;
color: #000;
letter-spacing: 2px;
}

.project-wrap h2 {
font-weight: 900;
}

.modal-click-send-home {
text-decoration: underline;
text-decoration-color: #3f3fff;
font-weight: 400;
}

.modal-click-send-home:hover {
cursor: pointer;
opacity: 0.8;
transition: 0.5s;
}

.contact-form-heading-modal {
margin: 245px auto 35px 2.5vw;
padding: 0;
display: flex;
flex-direction: column;
}

.contact-form-heading-modal h6 {
font-size: 30px;
font-weight: 100;
color: #000;
}

.contact-form-heading-modal p {
font-size: 30px;
font-weight: 100;
color: #000;
opacity: 0.5;
}

.form-block {
width: 100%;
}

.form-wrapper-modal {
width: 100%;
max-width: 50%;
margin: 0 auto;
padding: 0;
}

.subject-wrap {
width: 100%;
clear: both;
position: relative;
height: 58px;
line-height: 58px;
}

.form-wrapper-l {
width: 50%;
float: left;
display: flex;
}

.form-block {
font-size:21px;
}
script from W3C

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("btnhomeModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
See ? after when I click X or somewhere else this contact form just disappears, how can I make it slide out after when the X is clicked?

Thank you so much for help. I appreciate any help from you guys !

Regards,

Modal slide in and slide out after X click

1 réponse