【发布时间】：2016-06-30 21:42:01
【问题描述】：
我刚开始编写脚本，我不知道在关闭模态窗口时如何添加淡出动画（与淡入动画相同）。
我喜欢它的一切，它只需要一个结束动画。 有人可以帮我吗！？
:)
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* 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(255, 255, 255); /* Fallback color */
background-color: rgba(255, 255, 255.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 5.4s;
animation-name: fadeIn;
animation-duration: 5.4s;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 0px;
width: 822px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02),0 6px 20px 0 rgba(0,0,0,0.02);
}
/* 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 {
-webkit-animation-name: fadeOut; /* Fade in the background */
-webkit-animation-duration: 5.4s;
animation-name: fadeOut;
animation-duration: 5.4s
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
color: #5B5B5B;
font-size: 30px;
font-family: source-sans-pro, sans-serif;
font-weight: 300;
position: relative;
}
.modal-body {
width: 538px;
color: #7A7A7A;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
position: relative;
}
.modal-footer {
padding: 2px 16px;
background-color: #ffffff;
color: blac;
}
/* Add Animation */
@-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
@-webkit-keyframes fadeOut {
from {opacity: 1}
to {opacity: 0}
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="clearfix grpelem" id="u1562-4"><!-- content -->
<p>test</p>
</div>
</div>
<div class="clearfix colelem" id="u1567-4"><!-- content -->
<p>test</p>
</div>
<div class="colelem" id="u1568"><!-- simple frame --></div>
<div class="clearfix colelem" id="u1566-4"><!-- content -->
<p>test</p>
</div>
<div class="clip_frame colelem" id="u1556"><!-- image -->
<img class="block" id="u1556_img" src="" alt="" width="823" height="1024"/>
</div>
<div class="modal-footer">
<h3>-</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks 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";
}
}
</script>
</body>
</html>
【问题讨论】：
标签： javascript html css fadeout modal-window