Javascript 单击X后，模式滑入和滑出

我希望有人能帮助我

我有一个带有

span

的

div

，单击后该

span

会触发从右到中滑动的模式，但是我不知道如何使用滑动反转动画进行关闭过程？因此，基本上，当你点击关闭按钮时，它会滑出容器

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

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“btnhomeModal”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

看到了吗？当我单击

X

或在其他地方此联系人表单消失后，如何使其在单击

X

后滑出

非常感谢你的帮助。谢谢你们的帮助

---

在这方面，

您必须将转换应用到模式以滑入和滑出

在“打开”和“关闭”操作中添加类和删除类

对于要工作的转换，元素应该存在，并且显示属性应该可见。尝试更改模式的位置，如果要向左滑动，请在关闭时将默认位置设置为向右：-100%，在打开时将位置更改为向右：0

请参阅下面的代码笔链接

js

---

您在使用JQuery吗？是的，但是我更喜欢JavaScript-您有解决方案吗？谢谢谢谢，但是这不起作用-当你点击“X”时，模态会停留在它的位置上。对不起，我粘贴了一个错误的链接到代码笔，它现在已经更新了。使用该逻辑添加和删除类以获得转换效果。链接：

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

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

modal.classList.add("open")

modal.classList.remove("open")