I was wondering if anyone knows how to have a txt link pop up a light box… but when the lightbox image pops up, it doesnt show as a black screen around it… just a image that pops up…?
Apply a background-color to your “modal-background” element.
Set its alpha transparcy to like 60%.
Its properties should look like this:
Set its display mode to :hidden
Go to the “Assets → Interactions” and create two new interactions.
3.1 First one named “show modal”
(be sure to have no element selected in the editor - else it will be applied to this selected element)
Should look like this:
3.2 Second one name “hide modal”
Now:
Go to your navigator and select the link “Read more” and apply the interaction “show modal” to that.
Then select the “modal background” and apply the interaction “hide modal”.
If you then preview the site, your modal should work fine. And if you click on the open modal / its black background it should disappear.
Thanks daniel… i think im almost there… im just having difficulty closing the box and also having the image be big? right now its showing so small… the acutal size of the image is 720 pixels by 400
Thats because your image has no actual dimensions … yeah it is correct that the actual image has 720 by 400 pixels, but take a look at the properties. it is set to: “Auto”.
That means that it relies on its actual container. And when you look at your “modal window” you will see that its size is actually: width: 70px. Therefore your image within that element will be given this value as width.
And one more thing. Since we “close” the modal with another interaction by clicking on the “modal background” please remove the “second click” interaction from “SHOW MODAL”.
It should then look like this:
Also dont trigger the “SHOW MODAL” interaction by setting it on the “row” but just on the hyperlink itself.
Click on “row”
The remove the interaction from there
2.1 go to “Assets” → Select “none”
@Daniel_Schultheiss
How do you change the background color of the lightbox. Also how can I export the HTML code, edit it and import it back into my page?