gpt4 book ai didi

javascript - 为关闭模态窗口启用向下滑动动画

转载 作者:可可西里 更新时间:2023-11-01 12:54:29 25 4
gpt4 key购买 nike

我使用 html、css 和 JavaScript 创建了一个模态,代码片段中包含这些模态。

您会注意到,当模态窗口打开 时,它有一个从顶部滑动的动画。

我想让模态窗口在关闭时有滑动到底部的动画(而不是在它的位置立即消失)

有人可以调整代码以获得预期的效果吗?提前致谢!

let open_modals = [];

(function() {

// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

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

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
open_modals.push(modal.id);
}
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].style.display = "none";
open_modals.pop();
}
}
}
}
})();
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */

.modal {
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 0.1875em;
/* Location of the box */
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 */

.modal-content {
color: white;
position: relative;
background-color: #171B20;
margin: auto;
padding: 0;
border: 0.0625em solid #888;
width: 97%;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.2), 0 0.375em 1.25em 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
}


/* Add Animation */

@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}

@keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}


/* The Close Button */

.close {
color: #F0B823;
float: right;
font-size: 9vw;
font-weight: bold;
position: absolute;
right: 0.25em;
top: -0.25em;
}

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

.modal-header {
padding: 0.125em 1em;
background-color: #171B20;
color: #F0B823;
}

.modal-body {}

.modal-button {
font-family: 'Quicksand', sans-serif;
background-color: #171B20;
border: none;
color: white;
padding: 0.248em 0.496em;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 7vw;
margin: 0.124em 0.062em;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
width: auto;
}

.modal-button:hover {
background-color: #171B20;
color: #F0B823;
}

.pic {
margin: auto;
display: block;
height: auto;
width: 50vh;
}

.headertext {
font-family: 'Quicksand', sans-serif;
display: block;
text-align: center;
font-size: 6.50vw;
}

.bodytext {
font-size: 3.90vw;
font-family: 'Quicksand', sans-serif;
display: block;
padding: 0.625em 0.9375em;
}

p {
display: block;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="headertext">
<p>Modal Header</p>
</div>
</div>
<div class="modal-body">
<img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
<div class="bodytext">
<p>Body Text Comes here</p>
</div>
</div>
</div>
</div>

最佳答案

演示 https://codepen.io/phong18/pen/VwZzZQm

添加更多的CSS

@-webkit-keyframes animateBottom {
from {
top: 0px;
opacity: 1;
}
to {
top: 500px;
opacity: 0;
}
}

@keyframes animateBottom {
from {
top: 0px;
opacity: 1;
}
to {
top: 300px;
opacity: 0;
}
}
.modal-content-active {

-webkit-animation-name: animateBottom;
-webkit-animation-duration: 0.4s;
animation-name: animateBottom;
animation-duration: 0.4s;
}

和固定 js

    // When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].classList.add("modal-content-active");
var item = modals[index];
setTimeout(function(){
item.classList.remove("modal-content-active");
item.style.display = "none";
open_modals.pop();

},400);
}
}
}
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].classList.add("modal-content-active");
var item = modals[index];
setTimeout(function(){

item.classList.remove("modal-content-active");
item.style.display = "none";
open_modals.pop();

},400);

}
}
}
}

创建类 .modal-content-active 然后在单击关闭图标后将其添加到模态,然后等待 0.4 秒以删除模态。希望能帮到你。

关于javascript - 为关闭模态窗口启用向下滑动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57721413/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com