Theodore Steiner Theodore Steiner - 3 months ago 25
CSS Question

Modal Reverse Fade

I was testing a modal that has a neat little fade in, however, when you close the modal, it just cuts out rather than reverses the fade.

I figured that the easiest way to accomplish this would be an IF statement within the JS that is controlling the open and close.

Would the proper notation to achieve this be the following:

close.onclick = function()
{
modal.style.@keyframes.slideIn (and then put the reverse of my numbers here?)
};


Original Code:

HTML:

<h2>Bottom Modal</h2>

<button id="button">Click Me</button>

<div id="modal">

<div id="modal-content">
<div id="modal-header">
<span id="close">&times</span>
<h2>modal header</h2>
</div>

<div id="modal-body">
<p>Some text in the modal body</p>
<p>Some other text in the modal body</p>
</div>

<div id="modal-footer">
<h2>modal footer</h2>
</div>

</div><!--modal-content-->
</div><!--modal div-->


CSS:

#modal
{
position: fixed;
z-index:1;
left:0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color:rgba(0,0,0,0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
display: none;
}

#modal-content
{
position: fixed;
bottom: 0;
backgroun-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
}

#close
{
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

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

#modal-header
{
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

#modal-footer
{
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

#modal-body
{
padding: 2px 16px;
background-color: white;
}

@-webkit-keyframes slideIn
{
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@keyframes slideIn
{
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn
{
from {opacity: 0}
to {opacity: 1}
}

@keyframes fadeIn
{
from {opacity: 0}
to {opacity: 1}
}


JS:

var modal = document.getElementById("modal");

var button = document.getElementById("button");

var close = document.getElementById("close");

button.onclick = function()
{
modal.style.display="block";
};

close.onclick = function()
{
modal.style.display="none";
};

window.onclick = function(event)
{
if(event.target == modal)
{
modal.style.display="none";
}
};

Answer

applying an animation event to an html element will trigger the animation only once..unless you use some javascript tricks like:

  • Clone the element

  • remove the original element

  • and inject the cloneNode with the animation class back into your document

I would prefer to use transition

See demo here

NB: I seperated your modal content container from your modal container to get a proper effect

var modal = document.getElementById("modal");
var modal_content = document.getElementById("modal-content");

var button = document.getElementById("button");

var close = document.getElementById("close");

button.onclick = function()
{
modal.classList.remove('modal_trans');
modal.classList.add('modal_trans');
modal_content.classList.remove('modal_content');
modal_content.classList.add('modal_content');
console.log(modal.classList)
};

close.onclick = function(){
//modal.classList.remove('reverse');
modal.classList.remove('modal_trans');
modal_content.classList.remove('modal_content');
console.log(modal.classList);
}
#modal
{
position: fixed;
z-index:1;
left:0;
width: 100%;
height: 100%;
overflow: auto;
background-color:rgba(0,0,0,0.4);
opacity: 0;
transition:all 0.5s;
display:none;
}

#modal-content
{
background-color: #fefefe;
width: 100%;
position:fixed;
bottom:-400px;
transition:all 0.5s;
z-index:2;
}

#close
{
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

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

#modal-header
 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
 }

#modal-footer
{
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

#modal-body
{
padding: 2px 16px;
background-color: white;
}

.modal_trans{
  opacity:1 !important;
  top:0 !important;
  width:100%;
  display:block !important;
}
.modal_content{
  bottom:0 !important;
  width:100% !important;
  margin:none;
  padding:none;
  text-align:
}
body{
  margin:auto;
}
<h2>Bottom Modal</h2>

<button id="button">Click Me</button>

<div id="modal">
</div><!--modal div-->
<div id="modal-content">
    <div id="modal-header">
        <span id="close">&times</span>
        <h2>modal header</h2>
    </div>

    <div id="modal-body">
        <p>Some text in the modal body</p>
        <p>Some other text in the modal body</p>
    </div>

    <div id="modal-footer">
        <h2>modal footer</h2>
    </div>

</div><!--modal-content-->

Comments