0
Ich habe gerade mit dem Scripting begonnen, und ich kann nicht herausfinden, wie man eine Ausblendungsanimation (die gleiche wie die Einblendanimation) beim Schließen des modalen Fensters hinzufügt.Ich brauche eine Ausblendanimation für meinen modalen Fenstercode
Hier ist ein Link zum Projekt: https://jsfiddle.net/myosis/kb0o27vy/
Ich mag alles über sie, es braucht nur eine Schließung Animation. Kann mir jemand helfen ?!
:)
<!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>
Ich mag es, alle vorgeschlagenen Optionen zu erkunden, ich muss @Phil sagen Ich mag deine besten, genau das, was ich gesucht habe! Wie würde ich gehen und das zu dem Teil hinzufügen, wenn ich außerhalb des modalen Fensters klicke? – myosis
Hey, ich habe meine Antwort aktualisiert und ein Overlay hinzugefügt. Hoffe, das ist was du brauchst. Dies ist ein cooles jQuery - Plugin für Modale: http://flaviusmatis.github.io/easyModal.js/. Es ist leicht und einfach zu verstehen. – Phil
Ich bin verloren, es ist kompliziert für mich mit diesem Overlay, es funktioniert gut! Ich versuchte jedoch, die Bildlaufleisten im modalen Fenster loszuwerden, aber verlor sich in einem endlosen Zyklus von nirgendwohin :( Haben Sie vielleicht eine Idee, wie Sie sie zurück in ihre ursprüngliche Position bringen? – myosis