javascript - How to get Fade-in-out modal effect? - Stack Overflow

/

I'm trying to get this JSFiddle to fade-in and fade out on close. It's working but after closing it hasn't been opening again. I tried to set the div to display:none after 900ms but that stopped the close fade working. Can anyone see what change to JSFiddle would need to be made to allow it to open again?

<div class="w3-container">
  <h2>Animated Modal</h2>

  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Fade In Modal</button>

  <div id="id01" class="w3-modal w3-animate-opacity">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal">
        <span onclick="document.getElementById('id01').classList.add('w3-animate-show');" class="w3-button w3-large w3-display-topright">&times;</span>
        <h2>Modal Header</h2>
      </header>
      <div class="w3-container">
        <p>Some text..</p>
        <p>Some text..</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
      </footer>
    </div>
  </div>
</div>

CSS

 .w3-animate-opacity {
   animation: opac 0.8s
 }

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

 .w3-animate-show {
   animation: show 0.8s;
   animation-fill-mode: forwards;
 }

 @keyframes show {
   0% {
     opacity: 1
   }
   100% {
     opacity: 0
   }
 }

https://jsfiddle/7doq0vkL/1/

I'm trying to get this JSFiddle to fade-in and fade out on close. It's working but after closing it hasn't been opening again. I tried to set the div to display:none after 900ms but that stopped the close fade working. Can anyone see what change to JSFiddle would need to be made to allow it to open again?

<div class="w3-container">
  <h2>Animated Modal</h2>

  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Fade In Modal</button>

  <div id="id01" class="w3-modal w3-animate-opacity">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal">
        <span onclick="document.getElementById('id01').classList.add('w3-animate-show');" class="w3-button w3-large w3-display-topright">&times;</span>
        <h2>Modal Header</h2>
      </header>
      <div class="w3-container">
        <p>Some text..</p>
        <p>Some text..</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
      </footer>
    </div>
  </div>
</div>

CSS

 .w3-animate-opacity {
   animation: opac 0.8s
 }

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

 .w3-animate-show {
   animation: show 0.8s;
   animation-fill-mode: forwards;
 }

 @keyframes show {
   0% {
     opacity: 1
   }
   100% {
     opacity: 0
   }
 }

• javascript
• html
• css

Share Improve this question Follow asked Aug 10, 2017 at 3:38 user1946932user1946932 60022 gold badges1919 silver badges4343 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Leaving the element on the page with display: none; opacity: 0; will maintain the layout of that element on the page, covering your button. You can use the animationend event to apply display: none once the element has faded out.

var id01 = document.getElementById('id01');

document.querySelector('.close').addEventListener('click', function() {
  id01.classList.add('w3-animate-show');
})

id01.addEventListener('animationend', function() {
  if (this.classList.contains('w3-animate-show')) {
    this.style.display = 'none';
    this.classList.remove('w3-animate-show')
  }
});

<link href="https://www.w3schools./w3css/4/w3.css" rel="stylesheet"/>
<style>
 .w3-animate-opacity {
   animation: opac 0.8s
 }
 
 @keyframes opac {
   from {
     opacity: 0
   }
   to {
     opacity: 1
   }
 }
 
 .w3-animate-show {
   animation: show 0.8s;
   animation-fill-mode: forwards;
 }
 
 @keyframes show {
   0% {
     opacity: 1
   }
   100% {
     opacity: 0
   }
 }
</style>
<div class="w3-container">
  <h2>Animated Modal</h2>

  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Fade In Modal</button>

  <div id="id01" class="w3-modal w3-animate-opacity">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal">
        <span class="w3-button w3-large w3-display-topright close">&times;</span>
        <h2>Modal Header</h2>
      </header>
      <div class="w3-container">
        <p>Some text..</p>
        <p>Some text..</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
      </footer>
    </div>
  </div>
</div>

Check this link and you will know how to do that: https://jsfiddle/7doq0vkL/1/

The main problem with your code is that you are not setting display:none for the modal and secondly, on clicking that button, you have to remove that fading class "w3-animate-show".