Lightbox close immediately on submit

Hi Everyone,

I have a lightbox with an email field in it. Once submitted it takes you to a second lightbox with text. The problem I am having is when you submit the email it holds for 3 to 5 seconds and you aren’t able to tell the form had been successfully submitted. What I am trying to do is get the first lightbox to close immediately after submitting. I accomplished this by using the code below:

import wixWindow from ‘wix-window’;

$w.onReady(function () {

$w(‘#button8’).onClick(function () {
wixWindow.lightbox.close($w(‘#lightbox1’));

})

})

Everything works great in Preview but when I publish it and test it in the live site. The second popup does not trigger. Any ideas?

Thank you,
Kory

1 Like

Read the API reference for lightbox close
https://www.wix.com/corvid/reference/wix-window.lightbox.html#close
close( )
Closes the lightbox.
Description
The close() function closes the lightbox and returns the given data to the openLightbox() function that was used to open the lightbox.
To pass data back to the page that opened the lightbox, you must close the lightbox programmatically using the close() function. If the lightbox is closed by the site visitor clicking the ‘X’ icon, close button, or lightbox overlay, data will not be passed back the the page that opened the lightbox. Therefore, if you want to make sure data is passed back to the page that opened the lightbox, disable all of the methods mentioned above and create your own method for closing the lightbox programmatically. For example, you can add a button with an onClick event handler that calls the close() function.

Close the lightbox

import wixWindow from 'wix-window';

// ...

wixWindow.lightbox.close();
//as this code will be on the page code for your lightbox, then you don't need to have the lightbox name in it.

If you are using the submit button from the Wix Editor menu, then note that it is setup to be delayed as you can add your own automated success or fail message to be shown after the submit button is clicked.
https://support.wix.com/en/article/adding-a-submit-button-to-your-form

If you are doing the close and open lightboxes through code, then DON’T use the Wix Editor Submit Button option of link to a new page.

If you don’t want this to happen then you will need to use a button with code that saves the users inputs through code to a dataset instead - Dataset - Velo API Reference - Wix.com

As for closing the lightbox after submitting data and moving onto another one, well that is simple as I have it on another website of mine.

 wixWindow.lightbox.close();
  wixWindow.openLightbox("Lightbox2");

Finally, as for your onClick event handler part of the code, you are trying to do something that is half written in code and half through properties panel.

$w('#button8').onClick(function () { //this is setup wrong.
$w("#button8").onClick( (event) => {

This is how the event handler function for that element is written into code itself, so that you do not need to add the event handler manually through the properties panel for that element.

export function button8_onClick(event) {

This is how the event handler function for that element is written when you add the event handler through the properties panel for that element itself. You will get this line of code added automatically at the end of your page code, so if you already have it on your page, then you need to delete the extra line.

Perfect! Thank you so much. It was due to me trying to use Wix Forms.

is there a way to delay the closure at least 2 seconds so that user can actually see the “submitted” notification ?

Sure! Just do a settimeout