Lightbox on hover

Ask the community
,
1

I want to make a lightbox appear on mouse hover, but when I close it, it should not appear again until the next visit. How to make this happen? I especially clueless about the part where it won’t show for the second time.

2

Hi,
Do you want it not to appear again for the current session, or even if the user re-opens the site?

3

Current session only Tomer. But now I think the other one can be implemented too. So for “even if the user re-opens” then they have to cleared the cookies first?

4

We provide 2 types of storage where you can store these kind of preferences.
One is for the current session, the other is until the user clears the browser’s local storage.
You can read about it here:

Please take a look at the code examples and try to use it.
If you encounter any issues or errors, let us know and we’ll guide you through it.

5

I have tried it, but it seems it doesn’t work. Here is my code:

import local from 'wix-storage';
export function SUMMITHeader_mouseIn(event) {
	let formFactor = local.formFactor;
	$w("#MailingListPopUp").show("FadeIn"); 
}

export function XMailingListPopUp_click(event) {
	$w("#MailingListPopUp").hide("FadeOut");
}

FYI I don’t use lightbox, instead I just use a container box. The first one is the show effect. The second one is closing it with X button. Which part that I do wrong?

6

The import code should be:

import {local} from 'wix-storage';

Notice the braces around “local”. It’s related to how JavaScript modules work, but we don’t have to get into that. If you copied this example from our documentation, please let us know so we can fix it.
Another way to import (might be useful to more people) is to use code completion. Just press CTRL+SPACE at the beginning of the file, and you will see all the available imports.

The second problem is that you need to use the storage API:

Specifically, the setItem and getItem functions, in order to “save” and “retrieve” information from storage.
Look at the code examples there and let us know if you were able to make it work.