Lightbox show/hide

Ask the community
,
1

Hi Guys,

Is it possible to use a hamburger menu to open a lightbox and hide another container, then be able to close the lightbox and show the container again? I can click to open the lightbox and hide the container, but can’t get it to show the container again. I’m guessing because the lightbox needs to be dismissed and covers the hamburger so it can’t be pressed again?

I have attached pics of the lightbox menu how I want it, and also the reg view. My code so far is below and site address is https://tailoredwebdesign.wixsite.com/hidden-cove

1920×935 514 KB

1920×946 501 KB

import wixWindow from ‘wix-window’;
export function shape1_click() {
wixWindow.openLightbox(“Menu1”);
$w(‘#container2’).hide();
}

export function shape2_click() {
wixWindow.lightbox.close(“Menu1”);
$w(‘#container2’).show();
}

2

Also while on this subject, I have differing positions on the lightbox placement with different devices/monitors so this probably is pointless! On once PC the box was halfway under the top search bar on my PC!!

3

Hey,

Firstly, please unlink the Hamburger menu from the Lightbox as explained here:
https://support.wix.com/en/article/adding-a-link-to-an-element-6404699
Afterwards, you would need to do the following:

  1. Create an OnClick event for the Hamburger menu: https://www.wix.com/code/reference/$w.Shape.html#onClick

  2. Hide the container box: https://www.wix.com/code/reference/$w.HtmlComponent.html#hide

  3. Open the Lightbox and show the container box once it is closed using promises:
    https://www.wix.com/code/reference/wix-window.html#openLightbox
    https://www.wix.com/code/reference/$w.HtmlComponent.html#show

export function shapeID_click(event) {
    $w("#containerID").hide();
    wixWindow.openLightbox("LightboxName")
        .then(() => {
            $w('#containerID').show();
        });
}

Note that you can apply Animations when hiding and showing the container box.

As for your second query, please reply with a screenshot of the issue so that we can better understand what you were referring.

Have a good day,
Tal.

4

Hey Tal, thank you so much that worked perfectly! I had to use a full half screen lightbox and make transparent then add the menu and that seems to work ok. Can you please confirm it is ok on your desktop?

https://tailoredwebdesign.wixsite.com/hidden-cove

5

Hey,
I’m glad to hear that you managed to resolve the issue.
As for your question- yes, it works fine on my end.

6

Hi Tal, I have since realised that the buttons don’t work in the lightbox with this code? Do I need to use wix cide instead of linking normally to a page?

7

Ok, so got the links working by removing the (event) in the brackets. But now when I click a link and go to the page my hamburger menu is gone.

It is because I want the close button to be on top as per attached image so I hide the hamburger but it doesn’t come back with the code on after clicking a link. Please help

628×798 925 KB

:

import wixWindow from ‘wix-window’;
export function button9_click() {
$w(“#container2”).hide();
$w(“#shape4”).hide();
wixWindow.openLightbox(“Menu2”)
.then(() => {
$w(“#container2”).show();
$w(“#shape4”).show();
});
}

750×1132 923 KB

8

Hey,

I’m not sure that I fully understand what you would like to achieve. I’ve accessed your editor and noticed that you removed the element with the ID of ‘shape4’. Please clarify what is the scenario and send us a video of the issue using screencast . Simply recreate the issue while recording the steps. Add the screencast.com URL to your response.

Awaiting your reply,
Tal.

9

So basically I want to hide the hamburger icon when I open the lightbox, then have it reappear when I close it. My code works great until I open a new page off the menu, then the hamburger is missing. Video link here: Dropbox - File Deleted - Simplify your life

10

Hey,

In order to resolve the issue, you would need to add an onReady event to each of your menu pages and show the shape:

$w.onReady(() => {
    $w('#shape4').show();
});

Have a good day,
Tal.

11

Thanks Tal. Does this go in an export function or as is?

12

As is. I recommend reading the documentation for further information about this function:

Best,
Tal.

13

Thank you for your patience! Nearly there. I have a link from that lightbox menu going to another lightbox (virtual tour) with a video. Once you close that, once again the hamburger icon is missing. I thought the OnReady would take care of this?

new site (duplicate) https://tailoredwebdesign.wixsite.com/hidden-cove-splatty

14

Hey,

Please note that there are two different scenarios:

  1. Redirecting from a Lightbox to a page:
    In this case, you would need to make sure that the shape is displayed when redirecting to the page by using the onReady event.

  2. Redirecting from a Lightbox a different Lightbox:
    In this case, you wish to perform an action after the Lightbox is closed . Therefore, you would need to open the Lightbox using code and show the element using a promise . Note that I checked your editor and saw that you linked the “Virtual Tour” menu button using the editor instead of creating onClick event as explained on my first reply.

I hope it’s clearer now.

Best,
Tal.

15

Thanks. So on the lightbox page code:

import wixWindow from ‘wix-window’;
export function button9_click() {
wixWindow.openLightbox(“Virtual Tour”)
.then(() => {
$w(“#shape4”).show();
});
}

Also, if I press the button of the page I am already on, (ie press the home button when I am already on the home) the button disappears too…Sigh

16

Hello Everyone,
Here, I am sharing some points regarding the issue or understanding my site.

  1. I have created a lightbox for creating a vertical menu.

  2. When we click on the menu the lightbox is hiding. I want, the lightbox does not hide at the time of click.
    For better Understanding I am sharing the video link, so please check the link and suggest to me for a better option.
    menutask.webm
    Thank You.