javascript - 为关闭模态窗口启用向下滑动动画
问题描述
我使用 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>
解决方案
希望对你有帮助
$(function() {
$(".modal-button").on('click', function(e){
e.preventDefault();
modal = $($(this).attr("href"));
modal.css("display", "block");
modal.animate({
top: '0',
opacity: '1'
}, 400);
});
$(".close").on('click', function(e){
e.preventDefault();
modal = $($(this).closest(".modal"));
modal.animate({
top: '300',
opacity: '0'
}, 400, function(){
$(this).css("top", "-300px");
$(this).css("display", "none");
});
});
});
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
.modal {
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
display: none;
position: fixed;
z-index: 1;
padding-top: 0.1875em;
left: 0;
top: -300px;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
opacity: 1;
}
.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);
}
.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;
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>
推荐阅读
- javascript - 表格内容的换行符(引导程序)
- laravel - 如何通过laravel axios将id从一个vue组件传递到另一个vue组件的路由器来获取数据
- matplotlib - 如何将网格与 matplotlib 中的图像帧对齐?
- python - 如何在 python 中使用 Parks-McClellan 方法制作 FIR 滤波器
- angular - MSAL 访问令牌与 Id 令牌相同
- sql-server - 批量插入不会从我的 txt 文件中插入任何行
- three.js - Three.js - DOMException:“操作不安全。” - 很可能是跨域问题
- javascript - 从 Contenful + Angular 应用程序中的条目渲染图像
- c - 包括 SDL2 头文件会导致任何程序崩溃
- c# - 将 c++ 非托管代码编组为 c# 托管代码的替代方法