Overlay effect like lightbox using wix code

Ask the community
,
1

Hello,
Is it possible to make an overlay effect like lightbox using wix code?

Use Case:
I have a button and when I click on it, i need a container box to be opened and all other elements on the page should be blurred out to highlight the container box.

Is this possible?

2

Hi There!
My friend, the wheel is already invented and it works pretty amazing. Use the LightBox, put your Container Box on it and set the LightBox to full transparency, this way you will see only the Container Box you mention.

Best,
-Luigi

3

Hi There!
My friend, I know the wheel is already invented but it will not work pretty amazing in my use case. I have lot of pages where I need this overlay effect and Its not a good idea to use lightboxes due to this number of pages that I have. Moreover my container size varies.Some are small and some are big and I need to scroll down to see the container fully i the container is big. in this case also lightbox is not a proper solution. So I need a programmatic way of approaching this instead of using a simple lightbox. Anyway thanks for your reply. Do you know a way to do it using wixcode?

Best,
-Nithin

4

Ok, I see your problem. However, regardless the number of pages you have, just one LightBox would solve the problem. But, if you have large containers with a bunch of objects in them, I suggest using HIDE() or DISABLE( ) for all of the objects you want to get out of the way. You could also change the page background color to a dark color to complete the DIMMING effect.

Disable/Hide everything and just show your container. Then when you don’t need the containers anymore, do the inverse process.

5

Yes I can use the hide and show functions. But it won’t be that interactive and good looking . I can change the background colour using code, but i can only change it to a solid colour and not a colour with opacity. So this also not that good looking like a lightbox. Anyway thanks for your reply. but can you tell me how to use just one LightBox to solve the problem regardless the number of pages I have?

6

Hi,

Unfortunately Wix Code does not support design currently.
As Luigino said, you can probably achieve that using a lightbox.
Have a lightbox with opacity, if you need the data on it to be according to the page you’re in, u se code to open the lightbox instead using the button build it functionality.
Let say you have a button called button1, and a lightbox called LightBox, which has a text element called ‘#text1’.
See this example:

Button onClick code:

import wixWindow from 'wix-window';
export function button1_click() {
    const dataObj = {
        pageName: 'page1';
    }
    wixWindow.openLightbox("Lightbox", dataObj);
}

Lightbox code:

import wixWindow from 'wix-window';
$w.onReady(function (){
    let receivedData = wixWindow.lightbox.getContext();
    $w('#text1').text = `Open from ${recievedData.pageName} page!`;
});

Hope this helps,
Liran