How to close the lightbox

Ask the community
, ,
1

Here is the quick tip I would like to share (not a question).

I had a couple people emailed me personally from the Wix forum asking this question. I thought I post it here in case people are searching for the answer.

I understand the Lightbox API maybe a bit hard to find. It is in the wix-window API. Here you have it:

And to close the lightbox, use this:
wixWindow.lightbox.close();

Hope that helps.

1 Like
2

Hi Keawe,
I am trying to close the light box when I move away from the button , currently I have
On the site tab I have the following codes :

$w.onReady(function () {
//TODO: write your page related code here…

});

import window from ‘wix-window’;

export function button2_onmouseIn(event) {
window.openLightbox(‘brands’);
}

export function button3_onmouseIn(event) {
window.openLightbox(‘perfumes’);
}

and on the page tab I have the following codes :

});

import window from ‘wix-windows’;

export function button3_onmouseIn(event) {
window.openLightbox(‘perfumes’);
}

export function lightbox2_onmouseOut(event) {
window.lightbox.close();

}

3

Hey rouka1, Does it work?

4

Hi Keawe,
Thanks for your reply and please accept my apology for late reply due to time zone difference,
I have now replaced my lightbox with a content box and used show & hide codes to make the content box show when mouse is on button and hide when mouse is away from button but I need to give site visitors “time” when they are on the lightbox to select an item from within the lightbox, is it possible ? and what is the code ?

5

My website : https://www.perfumes-bouquet.com/

6

I think this approach may work. Here is the pseudo code follows by the simple code.

Pseudo:
On top of the code page, create a variable (call it myTimer) to hold a setTimeOut pointer.
In your onMouseOut handler, Use setTimeout to delay the content box to disappear in x second.
That will give your user enough time to go inside before the content box (you still call it lightbox) disappear.
Clear the timer using the variable myTimer when the user selects an item. That way the user can spend all the time they want to make selection decision.
When the user’s mouse is out of the content box, reset the timer to make it disappear.

Here is the simple code (I tested it. It works)

let myTimer;
$w.onReady(function () {
// write some code here
});

export function button_mouseIn() {
clearTimeout(myTimer);
$w(‘#container’).show();
}

export function button_mouseOut() {
myTimer = setTimeout(()=>{
$w(‘#container’).hide();
},1500);
}

export function container_mouseIn() {
clearTimeout(myTimer);
}

export function container_mouseOut() {
myTimer = setTimeout(()=>{
$w(‘#container’).hide();
},1500);
}

Note:
– Make sure the myTimer is on top of your page. Because it needs to be accessed by all the handlers.
– The 1500 is just my test. You can use whatever wait time you want.

Hope that works for you :slight_smile:

P.S. I am not part of Wix support team. I am just some random guy who like to pitch in to help the Wix Code community. I will try to get back to you whenever I have spare time. But I can’t promise I will reply in time.

Happy coding.

7

Also, you have "import window from ‘wix-windows’; " on top of each export function…
Hope you are really not doing that. You should only import something on top of the page once only.
Just thought I mention it. Maybe you already know. :slight_smile:

8

Thanks a lot for your generous reply, I will implement it on my site and come back to you with a million thanks

9

Hi Keawe,
I placed the code but when the mouse is inside the container the setTimeout delay doesn’t work :
export function container_mouseIn() {
clearTimeout(myTimer);
}

export function container_mouseOut() {
myTimer = setTimeout(()=>{
$w(‘#container’).hide();
},1500);
}

and to show you the code I placed in full is as follows :
let myTimer;
$w.onReady(function () {
// write some code here
});

export function button18_onmouseIn() {
clearTimeout(myTimer);
$w(“#box3”).show();
}

export function button18_onmouseOut() {
myTimer = setTimeout(()=>{
$w(“#box3”).hide();
},1500);
}

export function box3_onmouseIn() {
clearTimeout(myTimer);
}

export function box3_onmouseOut() {
myTimer = setTimeout(()=>{
$w(“#box3”).hide();
},1500);
}

Kindly advise what did I misplaced ?

Thanks & Best Regards

10

Did you check to make sure all the handlers are named correctly for each element? For example: Do you have the function names correct correctly for the box3 onmouseIn?
I will screen record what I have done and post it here to show you after on today.

11

Thanks for your reply, do you think that those codes are not copied correctly by me ?

export function box3_onmouseIn() {
clearTimeout(myTimer);
}

export function box3_onmouseOut() {
myTimer = setTimeout(()=>{
$w(“#box3”).hide();
},1500);
}

Thanks for your reply and screen record if possible would be great

12

Really hard to tell without actually look at your page in the editor.
Here is the video of my sample. Follow this and it should work.

https://vimeo.com/266792566

13

Thanks for your reply, should I remove any other codes from the page ? if no then where should I place your code (on the top of the page or on the bottom of the page ?

and what does the sentence "write some code here " mean ?

14

Hi Keawe,
Please find attached the video showing the website page (button and content box) , codes added and result happening, kindly advise what might be wrong
Thanks

15

Here this the problem I found. See the image here. Your box3 onMouseIn and onMouseOut handlers are empty. That’s why they don’t work! You need to put the correct function names in there. Just like you did for the buttons.

359×516 81.6 KB

Also, remove the code in the red box. It is not necessary. You were running the onReady function twice. It may create error in the future.

892×487 169 KB

Hope that helps.

Have fun :slight_smile:

Keawe

16

It worked perfectly, thank you very much for your valuable assistance
Best wishes of a great weekend

17

Hi Keawe,
Thank you very much for your assistance on the light box, I am trying to create a 3 category product search filter of the following :

  1. Perfume Type : “For Him” or “For Her” or “Unisex”
  2. By Brand
  3. By price range : 50-100 & 100-200 & 200-250 & 250-300 & more than 300

In a manner like the search on the left side of this site : Womens Perfume & Fragrances | LOOKFANTASTIC UK

Is it possible for this product search filter to search for products in my Ecwid store attached to my Wix website ?

Best Regards

Ahmed

18

Hi Ahmed, I haven’t used Ecwid store. I will find sometime to test it.
Thanks,

Kw

19

Hello Sir,

I have added lightbox on this page https://www.wellsquarednutrition.com/wellsquared-weekend
I wants to remove the lightbox after user enter their email and click on subscribe button.

I have also added this code in my footer but it’s till not working.