A half-working workaround

So for anyone searching for this in the future:

A workaround I’ve found is instead of making a button or a form submission open a lightbox,

making a button/form submission open a url in a lightbox and then setting the url to be the url of the lightbox.

This will allow me to pass through URL parameters, which can later be used.

To get the url of a lightbox, when the page is published try to open the lightbox, use inspect and select the shadowed background. You can find the url in the src of the iframe.

Example:

Also, an example of the solution:

IMPORTANT

Make sure the SIZE is set to the exact size of the lightbox. Width is easy to get, but height will be the height of all sections cumbined.

WARNING

This solution doesn’t seem to optimize the FORM SUBMISSION lightbox for mobile!

it shows the desktop version of the form submission lightbox when opening it on mobile devices, so on a form submission use a CUSTOM lightbox instead of the regular form submission.

The reason seems to have something to do with the fact that mobile form submission lightboxes are 240px wide instead of the usual 320px wide lightboxes (which is the width of the lightbox set in the SIZE settings).

If anyone finds a way to optimize this workaround for mobile, that would be great 😃

Good luck!

This is awesome!! Even if it is, as you say, a “half-working workaround” 🏁

Hi. It seems like going into a lot of trouble, overriding functionality.

Why not use browser functionality? The lightbox loads in an i-frame. The i-frame can have access to the parent document variables.

So, you can set a window variable on the top level, for example:

window.whatevah = "123";

Then, within the i-frame, you will have access to the variable, using the parent object:

console.log(parent.whatevah)

// 123

This will not work in preview mode, only on published page. In preview mode, everything is i-frames, so you will have to go through extensive messaging among containers.

Having said so, you can have two-way interchange of information between the lightbox and the parent, by using the messaging protocol. For example, if you want to set a parent document variable through the i-frame.

You can read more about it here

Good solution!

What about browser compatibility, will that work on all mainstream internet browsers?

Hello. Window parent is fully compatible to all modern browsers

So seems to be the case for postMessage (the bottom part of my post)