Question

我希望有人能帮助我。

我有一个div和一个span，这个span被点击后触发了从右向中心滑入的模态，但是我不知道如何闭合滑动反向动画程序？因此基本上，当您单击关闭按钮时，它将滑出容器。

<!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 id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</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>

<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-l">
      <label>Your Name</label>
<input type="text" name="name">  
</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

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;
}

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";
    }
}

看到了吗？当我单击X或其他地方后，此联系表单刚刚消失后，如何在单击X后将其滑出？

非常感谢您的帮助。我感谢你们的任何帮助！

关于

Answer 1

您必须对模态应用过渡才能滑入和滑出，

添加一个类，并在打开和关闭操作上删除一个类。

要使过渡正常工作，应存在元素，并且display属性应可见。请尝试更改模态的位置，如果要向左滑动，请将默认位置设置为向右：关闭时为-100％，打开时将位置更改为向右：0。

请参考下面的代码笔链接 https://codepen.io/anon/pen/YjzJyx

js

modal.classList.add("open")

modal.classList.remove("open")

X单击后模态滑入和滑出

1 个答案: