个人中心
gpt4 book ai didi

javascript - X点击后模态滑入滑出

转载 作者：行者123 更新时间：2023-11-28 17:03:29 26 4
gpt4 key购买 nike

我希望有人能帮助我。

我有一个带有 span 的 div，这个 span 在被点击后会触发从右边滑入中心的模态，但是我不知道如何用滑动反向动画制作关闭程序？所以基本上，当您点击关闭按钮时，它会从容器中滑出。

codepen source from W3C MODAL 

<!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 后滑出？

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

问候，

最佳答案

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

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

要使 Transition 起作用，元素应该存在并且显示属性应该可见。尝试更改模态框的位置，如果要向左滑动，请将默认位置设置为右侧:关闭时为 -100%，打开时将位置更改为右侧:0。

引用下面的codepen链接 https://codepen.io/anon/pen/YjzJyx

js

modal.classList.add("open")

modal.classList.remove("open")

关于javascript - X点击后模态滑入滑出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51268270/

26 4 0
文章推荐： javascript - 获取多选下拉列表的 selectedIndex
文章推荐： html - 如何让列表绝对定位，打破固定元素？
文章推荐： javascript - 如何重新格式化这个简单的 JSON，使其不会捕获 "Circular structure to JSON"异常？
文章推荐： javascript - 当我没有点击该项目时，为什么 JavaScript 会执行 "click"事件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com