JavaScript Modal with Fade Out Effect

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?

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( === modal) {
       setTimeout(()=>{ = 'none';
    if (modal.classList.contains('fade-in')) {

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

Glad I could help! :smiley:

1 Like