Instructions for creating a fading effect on W3schools Modal example

Question

Instructions for creating a fading effect on W3schools Modal example

After utilizing the CSS class from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_fade to achieve a fade in effect, I am now looking for a way to fade out when the modal closes. How can this be accomplished?

.w3-animate-opacity{animation: opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

Below is the code snippet:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>W3.CSS 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').style.display='none'" 
        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>

</body>
</html>

html css

Answer 1

Answer №1

If jQuery is not your preferred option, you can consider the following alternatives:

Implementing an animation effect:

.custom-animation{
    animation: fadeOut 0.8s;
    animation-fill-mode:forwards; // ensures the animation stops at its final state
}
@keyframes fadeOut{
    0%{opacity:1}
    100%{opacity:0}
}

To apply the animation in your HTML code, modify the span element as follows:

<span onclick="document.getElementById('id01').classList.add('custom-animation');" class="button close-button">&times;</span>

It's important to note that this animation does not actually close the modal, it simply makes it disappear visually.

Answer 2

If jQuery is not your preferred option, you can consider the following alternatives:

Implementing an animation effect:

.custom-animation{
    animation: fadeOut 0.8s;
    animation-fill-mode:forwards; // ensures the animation stops at its final state
}
@keyframes fadeOut{
    0%{opacity:1}
    100%{opacity:0}
}

To apply the animation in your HTML code, modify the span element as follows:

<span onclick="document.getElementById('id01').classList.add('custom-animation');" class="button close-button">&times;</span>

It's important to note that this animation does not actually close the modal, it simply makes it disappear visually.

Answer 3

Answer №2

Visit the following link to view the answer that was chosen: How to achieve a Fade-in-out effect for modals?

Here is the code snippet for achieving this effect:

var modal = document.getElementById('myModal');

document.querySelector('.close').addEventListener('click', function() {
  modal.classList.add('fade-in');
})

modal.addEventListener('animationend', function() {
  if (this.classList.contains('fade-in')) {
    this.style.display = 'none';
    this.classList.remove('fade-in');
  }
});

Answer 4

Visit the following link to view the answer that was chosen: How to achieve a Fade-in-out effect for modals?

Here is the code snippet for achieving this effect:

var modal = document.getElementById('myModal');

document.querySelector('.close').addEventListener('click', function() {
  modal.classList.add('fade-in');
})

modal.addEventListener('animationend', function() {
  if (this.classList.contains('fade-in')) {
    this.style.display = 'none';
    this.classList.remove('fade-in');
  }
});

Instructions for creating a fading effect on W3schools Modal example

Answer №1

Answer №2

Similar questions

Out-of-sync movement in animated characters

I can only use innerHTML once in my React application

Utilizing absolute positioning with a rotated div element

Automatically load file and play audio when the page is loaded

Javascript does not execute properly in Google Apps Script

Ways to align two columns at the center using CSS

Hide button for the last input form to dynamically remove in jQuery

Ways to enlarge the font size of text on a mobile website?

Using CSS to overlay a fixed element with a specific z-index

Certain line borders are more robust compared to the rest

Using PHP with the CodeIgniter framework, learn how to use Javascript to delete specific values in an HTML table row

Utilizing Javascript to Extract Data from Twitter Json Files

Transforming a JSON string containing multiple arrays into a JavaScript object

Center align Bootstrap 4 dropdown menu

Align an image with text using CSS and HTML

Adjusting image size according to browser dimensions

Disabling the visibility of elements through a transparent sticky-top menu

Adding an image in HTML from a different drive - step-by-step guide!

What is the most efficient way to display a dynamic alphabetical order list?

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox