# open/close lightbox (event)

**URL:** <https://forum.wixstudio.com/t/open-close-lightbox-event/12219>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [December 5, 2017, 4:44am UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219 "2017-12-05T04:44:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![eugene-m](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/eugene-m/32/824_2.png) [@eugene-m](https://forum.wixstudio.com/u/eugene-m)\
**Post date:** [December 5, 2017, 4:44am UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/1 "2017-12-05T04:44:27Z")

</div>

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](https://drive.google.com/open?id=1wXzZOdbUyyk5-JeB_DJD8q-0cscrwbUB)

---

<div class="post-metadata">

**Author:** ![system](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/system/32/86885_2.png) [@system](https://forum.wixstudio.com/u/system)\
**Post date:** [December 5, 2017, 8:11am UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/2 "2017-12-05T08:11:19Z")

</div>

Hi,

You can use [lightbox.close()](https://www.wix.com/code/reference/wix-window.lightbox.html#close) with data and use it as a promise callback in the calling page:

In your page code use the following:

```javascript
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:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![eugene-m](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/eugene-m/32/824_2.png) [@eugene-m](https://forum.wixstudio.com/u/eugene-m)\
**Post date:** [December 11, 2017, 11:27am UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/3 "2017-12-11T11:27:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![system](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/system/32/86885_2.png) [@system](https://forum.wixstudio.com/u/system)\
**Post date:** [December 11, 2017, 11:54am UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/4 "2017-12-11T11:54:48Z")

</div>

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

```

Liran.

---

<div class="post-metadata">

**Author:** ![eugene-m](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/eugene-m/32/824_2.png) [@eugene-m](https://forum.wixstudio.com/u/eugene-m)\
**Post date:** [December 12, 2017, 5:59pm UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/5 "2017-12-12T17:59:20Z")

</div>

Liran, thanks! Everything is ok and working.

---

<div class="post-metadata">

**Author:** ![keawe-wong](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/keawe-wong/32/1943_2.png) [@keawe-wong](https://forum.wixstudio.com/u/keawe-wong)\
**Post date:** [February 14, 2018, 10:37am UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/6 "2018-02-14T10:37:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![keawe-wong](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/keawe-wong/32/1943_2.png) [@keawe-wong](https://forum.wixstudio.com/u/keawe-wong)\
**Post date:** [February 14, 2018, 10:46am UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/7 "2018-02-14T10:46:32Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![divyanrohit18](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/divyanrohit18/32/9830_2.png) [@divyanrohit18](https://forum.wixstudio.com/u/divyanrohit18)\
**Post date:** [May 6, 2020, 6:21am UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/8 "2020-05-06T06:21:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![canute](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/canute/32/9739_2.png) [@canute](https://forum.wixstudio.com/u/canute)\
**Post date:** [January 29, 2021, 5:50pm UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/9 "2021-01-29T17:50:25Z")

</div>

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.

 ![](https://us1.discourse-cdn.com/wix/original/3X/f/d/fd93f2c8e8ae9d312b7d4e791a92e38477fd7368.jpeg)

---

<div class="post-metadata">

**Author:** ![piushkg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/piushkg/32/20629_2.png) [@piushkg](https://forum.wixstudio.com/u/piushkg)\
**Post date:** [August 11, 2021, 3:11pm UTC](https://forum.wixstudio.com/t/open-close-lightbox-event/12219/10 "2021-08-11T15:11:09Z")

</div>

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?