JavaScript Modal with Fade Out Effect

1

Hello,
I have created a modal gallery with images and used JavaScript because I want to add Fade-Out effect when I close the images because I added the Fade-In effect when I click on images but I need to add Fade-Out effect when I close the images?
https://codepen.io/beh4r/pen/OeKZoj

2

The reason that you are having an issue is that the modal display is set to ‘none’ before a fade-out can occur. If you use a setTimeout function to delay the change in display:none, the fadeout can complete before the modal is set to display:none.

Try this:

function outsideClick(e) {
     if(e.target === modal) {
       modal.classList.add('fade-out')
       setTimeout(()=>{
         modal.style.display = 'none';
         modal.classList.remove('fade-out')
       },1000)
        
    if (modal.classList.contains('fade-in')) {
        modal.classList.remove('fade-in');
        }
    }
}
2 Likes
3

Thanks a lot it works now. I was thinking to use a Set Timeout but thought would delay and didn’t tried it but it works with it so thanks a lot :slight_smile:

1 Like
4

Glad I could help! :smiley:

1 Like