0
Я только начал писать сценарии, и я не могу понять, как добавить анимацию постепенного исчезновения (ту же самую, что и угасание в анимации) при закрытии модального окна.Нужна анимация затухания для моего модального кода окна
Вот ссылка на проект: https://jsfiddle.net/myosis/kb0o27vy/
Мне нравится все об этом, это нужно только закрывающей анимации. Может кто-нибудь помочь мне !?
:)
<!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>
Мне нравится изучать все предлагаемые варианты, я должен сказать @Phil Мне нравится ваше лучшее, именно то, что я искал! Как мне пойти и добавить это в часть для wen, которую я нажимаю вне модального окна? – myosis
Эй, я обновил свой ответ и добавил наложение. Надеюсь, это то, что вам нужно. Это классный jQuery-плагин для модалов: http://flaviusmatis.github.io/easyModal.js/. Его легкий и легкий для понимания. – Phil
Я потерян, мне сложно с этим наложением, все работает хорошо! Я, однако, пытался избавиться от полос прокрутки в модальном окне, но потерялся в бесконечном цикле получения нигде :( Возможно, у вас есть идея, как вернуть их туда исходное положение? – myosis