Lightbox fades out.

Ask the community
,
1

How can I make my lightbox fade out when I click the button to close it? Can you provide me the full code to do it?
Thanks in advance.

2

https://www.wix.com/corvid/reference/$w.EffectOptions.html
https://www.wix.com/corvid/reference/$w.HiddenMixin.html#show
https://www.wix.com/corvid/reference/$w.HiddenMixin.html#hide

3

So the code to fade out a lightbox is this:

$w("#lightbox1").hide("fade");

But how do I code the button so it can trigger the animation?

4

For the user to close the lightbox and have the fade option applied, you will need to not use the Wix lightbox settings of the close button or the ‘X’ button to close either and you will have to add your own button to do so.

Otherwise it could all be tied into your submit button on the lightbox if you have one for example.

As for the code it will have to be placed directly underneath the export function line in your code for the button. See the tutorial page below for more info.
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events

Ziv (Wix Mod) also describes it excellently in his reply to an old forum post too.
https://www.wix.com/corvid/forum/community-discussion/mouse-over-effects

Also, note that with .hide() you are not actually closing the element, you are just hiding it from view and it will still be on the page taking up space.

You would be better off with lightboxes to close them completely otherwise it could cause issues on your page with the lightbox still being active on your page.
https://www.wix.com/corvid/reference/wix-window.lightbox.html
https://www.wix.com/corvid/reference/wix-window.html#openLightbox

5

Hi! First of, thank you for your help. I tried what you sent me but still no results. Here’s the fist thing I tried:

import wixWindow from 'wix-window';

export function button1_click(event) {
    wixWindow.lightbox.close("fade");
}

And here’s another:

import wixWindow from 'wix-window';

export function button1_click(event) {
     $w("#lightbox1").close("fade");
}

Both of them didn’t work, and the last one, when writing “.close”, it displayed a message that said: “close” does not exist in “#lightbox1”. I’m quite a beginner in this, so sorry if i did something dumb writing the code. Can you explain to me what did I do wrong? Thank you.