I would like this lightbox background to be full screen and opaque white. I have tried at least half a dozen different classes to effectuate this, but much to no avail.
Help?
This is what the inspector shows, stating a class of “modal fade show”. Apparently, that is exactly what it is doing, but how to circumvent it?
Would you be able to share a live URL so I could take a closer look?
It’s likely you will need to do this with a sub-class rather than applying a class directly to the light box modal. Within modals there are typically various levels that background colours may be applied, so being able to dig through the layers and your classes would be helpful.
Unfortunately, I do not yet have a website, as I am still in the learning/testing stage.
For the record, though, these are some of the classes that I have tried, both individually and in combination:
Is there any way, Norm, you could set up a similar grid, and figure it out on your end? It is just the most basic CSS grid, and I would like a full screen, opaque white background.
Thanks.
If you can create a very simple project with the settings you want for the modal, I can take a look and see if I can figure it out at my end with your project file.
OK, an exceedingly simple project, as requested. What I would like, as mentioned previously, is a full screen, opaque white background for the lightbox modal, rather than the attached shot showing a semi-transparent background.
Thank you.
Fox Lightbox Test.bloc (596.7 KB)
Like this?
Look at fullscreen-lb, fullscreen-modal and lightbox-close-icon to see how I configured this.
Here is an updated version of the example.
Fox Lightbox Test-updated.bloc (597.9 KB)
It worked, with one adjustment. I had to change the BG from transparent to 100% white.
Thank you SO much.
It’s interesting, by the way, that you did not apply these classes to any particular item, but merely added them to the class editor. Hmmm.
OOPS: In my excitement, I didn’t test it completely. This is a screenshot I failed to notice. How to remove the grey around the image?
Make sure you edit the correct class and set your background colour.
If you preview and inspect the code when the modal is open you can find all of these classes and more.
Yes, that worked. I had changed the BG on the wrong class. So thank you.
And now, sorry, I have to bug you with one more thing. The modal image is way too big. To reduce the size, I tried modal-content, I tried img-fluid. Neither worked.
Have another shot at it, you want to set a maximum height on the image by targeting the image tag (img) within the fullscreen-lb class like this.
What is happening here is the class is looking for any images that are children of objects that have the fullscreen-lb class and then setting a maximum height of 60% of the vertical height of the screen.
I hope that helps.
Perfecto. Muchas gracias.
Great art BTW
