How can i make this kind of "fade out" effect in jquery

https://gyazo.com/025498792180a9104c52a2738cc48327 This type of effect

Taken from https://www.w3schools.com/w3css/tryw3css_templates_restaurant_modal.htm

This is my code https://codepen.io/sebbe/pen/rQyrrv

This is how mine look right now https://gyazo.com/4347f1cbe9f6d3099305d037d7edb82f. I have tried fadeIn,fadeTo and FadeOut. Maybe it’s an animation effect?

Do you mean the animation as it pops in? When it is closed, it just disappears, there is no fading out.

It isn’t javascript, it’s just CSS.

/* This is the class on the modal: */
.w3-animate-zoom { animation:animatezoom 0.6s; }

/* This is the @keyframes rule used for it: */
@keyframes animatezoom{
  from {
    transform:scale(0)
  }
  to{
    transform:scale(1)
  }
}

That’s it. The modal is inside a container, which is set to the full size of the screen, and the container has a semi-transparent background. The modal sits inside that:

<div class="w3-modal">
  <div class="w3-animate-zoom">
    <!-- modal content here -->
  </div>
</div>

The whole thing starts off invisible (display: none in the CSS). When you click the button it makes it visible (by adding display: block to the w3-modal div, which overrides the display:none). When you click close it makes it invisible again by removing the display:block.

The zoom animation happens when the modal becomes visible, it doesn’t need any other code other than the above CSS. Each modal has an ID, and the JS is all in the HTML, so for the menu:

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

And on the menu close button:

<span onclick="document.getElementById('menu').style.display='none'" class="w3-button w3-display-topright w3-large">x</span>

EDIT: note the semi-transparent background on the container for the modal is quite important - it covers the whole page, so it prevents a user clicking another button and opening another modal on top of the existing one. And possibly this is what you meant by fading - there is no fading going on at all, there’s just another element being made visible on top of everything else on the page.

For a very basic version, moving the logic to a script rather than in the HTML itself:


If you wanted to move the logic to a script, need to point the buttons at the right place, so something like:

<button data-targetid="menu" class="w3-button w3-black w3-modal-open">menu</button>

For the button to open, and

<span data-targetid="menu" class="w3-button w3-display-topright w3-large w3-modal-close">x</span>

For the button to close.

document.addEventListener('click', event => {
  if (e.target.classList.contains('w3-modal-open') {
    // a button has been clicked, open a modal. Check which on by looking at the data attribute:
    document.getElementById(e.target.dataset.targetid).style.display = 'block';
  } else if (e.target.classList.contains('w3-modal-close') {
    // the close button has been clicked on a modal. Check which one by looking at the data attribute:
    document.getElementById(e.target.dataset.targetid).style.display = 'none';
  }  
});
2 Likes

Did some changes in the sass file seems to work now thanks.

My X button jumps down and then up durning animation https://gyazo.com/c8f860446d7b5c9d7f7ab531b4c952e7

Do you know why that’s the case

.x {width: 1em; background: transparent; text-decoration: none; } This is the styling. It dosen't have any margin/paddings when clicked that will pull it somewhere else.

Would need to see the code and it in action, not a screenshot — not really possible to tell at the minute, as could be any one of a number of things. Can you put the whole thing on CodePen or similar?