open/close lightbox (event)

Ask the community
,
1

Hi there,
For one of my projects, I need to add the effect of the disappearance of several elements on the page after the lightbox is opened

I added the code
export function buttonMenuEn_click() {
$w(‘#headerEn’).hide(“FadeOut”);
$w(‘#footerEn’).hide(“FadeOut”);
wixWindow.openLightbox(“MENU-EN”);
}
it works. But I can not think of how to display items on the page back when the lightbox is closed.
I added the code for the event page_mouseIn and page_onViewportEnter, but this event only works if you scroll the mouse wheel or move it to the hotspot.

Any ideas how to implement this automatically without additional action?
I attached a video https://drive.google.com/open?id=1wXzZOdbUyyk5-JeB_DJD8q-0cscrwbUB

2

Hi,

You can use lightbox.close() with data and use it as a promise callback in the calling page:

In your page code use the following:

wixWindow.openLightbox('Welcome').then(dataObj => {
		console.log(dataObj);
	})

Then, in your lightbox, remove the default functionality of the close button (or replace it with your own button) and set the button onClick to send data back to the page:

export function button1_click(event, $w) {
	const dataObj = {
		hello: 'world',
		hi: 'universe'
	};
	wixWindow.lightbox.close(dataObj);
}

This will cause the ‘console.log()’ statement from the page code, to log:
hello: world,
hi: universe

Just use the callback function to do whatever you want when the lightbox is closed.

Hope this helps,
Liran.

3

Liran, thanks! But I’m still in trouble. If I need to call the command after closing the lightbox
$w(‘#headerRu’).show(“FadeIn”);
$w(‘#footerRu’).show(“FadeIn”);

What should I write?

4 
wixWindow.openLightbox('Welcome').then(dataObj => { 		
     //This code will run after the lightbox is closed
     $w('#headerRu').show("FadeIn");
     $w('#footerRu').show("FadeIn");
 })

Liran.

5

Liran, thanks! Everything is ok and working.

6

Hello,

I can’t seem to pass data from the lightbox.close function back to openLightbox. I have tried everything.

I have a page with this code on it:
export function openLB_logIn() {

wixWindow.openLightbox("user").then( dataObj => { 
	console.log('close LB: ', dataObj);

/* and some other code */

});

}

On the lightbox page, I have:
export function closeLightBoxLogIn_click() {
const dataObj= {
isSuccess: false,
message: ‘user abort’
};

wixWindow.lightbox.close(dataObj);

}

I console.log it, the dataObj is undefined. That means nothing went through from the lightbox close function back to the openLightbox promise.

What did I do wrong? Any idea? Please let me know and thanks.

7

Sorry, I think I found the problem. I can’t use the lightbox.close function on the built in “close” button on the light box. I had to create my own “close” button. And it works!!

It turns out that after trying everything, there is still something I can and did try. Thanks. I love Wix code!!

8

Though I am using Wix Platform for the first time to create a website, the live page shows a Lightbox Subscribe mode that I had created earlier however this lightbox does not appear anywhere in the editor page. How can I get rid of this lightbox

9

You will find the light box under the Menu & Pages Options in the editor page.

  • Menu & Pages
  • Lightboxes
    You delete the same from there. It’s too late to receive a response I am sure you might have already figured it out.

1197×772 111 KB

10

Hi Guys, I have a heavy process which takes sometime to finish (This process is called on button click by user). I want to open a lightbox which says “Processing. Pls wait …” then call process and once process is over…I want to close Lightbox … I am not able to close it …any idea?