How should I be referencing elements inside a lightbox?

Ask the community
,
1

Hi - hopefully a really simple question, but I’m new to coding so learning as I go.

I’ve created a lightbox to use as a custom log in function. I’ve added the lightbox, added the user input elements onto the lightbox for logging in, and I’ve added my code into the site section of code.

I’ve got user input elements and buttons called such as ‘#email’ and ‘#password’ placed on the lightbox, yet in the site code console where I’ve placed this, the elements are not identified, which I’m assuming is because of the fact they sit in the Lightbox?

Against each element the code errors as (for example) ‘#email’ is not a valid selector.

Is there somewhere else I should be placing this code? Or some other way I should be referencing these elements?

Thank you in advance

2

EXAMPLE:

/*************
 * Page Code *
 *************/

import wixWindow from 'wix-window';

export function openButton_click(event) {
  wixWindow.openLightbox("MyLightBox", {
    "pageSend1": $w('#pageSend1').value,
    "pageSend2": $w('#pageSend2').value
  })
  .then( (data) => {
    $w('#pageReceive1').text = data.lightboxSend1;
    $w('#pageReceive2').text = data.lightboxSend2;
  } );
}

/*****************
 * Lightbox Code *
 *****************/

import wixWindow from 'wix-window';

$w.onReady( function () {
  let received = wixWindow.lightbox.getContext();
  $w('#lightBoxReceive1').text = received.pageSend1;
  $w('#lightBoxReceive2').text = received.pageSend2;
} );

export function closeButton_click(event) {
  wixWindow.lightbox.close( {
    "lightBoxSend1": $w('#lightBoxSend1').value,
    "lightBoxSend2": $w('#lightBoxSend2').value
  } );
}
3

Thank you so much!

Is there somewhere specific to add the Lightbox code? In the developer panel I see page and site, but nowhere to add lightbox code?

Thank you once more