How to create popover/hovering content

First let me give you an example of popover content from my existing non-responsive website built in SoftPress Freeway:

https://visionsecurity.jp/en/systems/1480.html

Open the above URL and then click on the 4 rows of little icons in at the right side of the page, just beneath the 1480S model number. When you do that, you will see popover content entitled “VISION 1480 Main Features.” Perhaps there’s another name for this content, but I use my self-created term “popover” for it.

How do I accomplish something like this in Blocs?

For example, I would like to assign a clickable link to a word in a paragraph on a Blocs web page that, when clicked, will give me a popover of a graphic or text and a graphic. And then the user could click/tap it to dismiss it. This is nice because you leave your visitor on the same page so they don’t lose context, which they would if you assign your link to a different web page in your site.

(Freeway accomplishes this with a Freeway Action called “ScriptyLightBox3.”)

Thanks,

James W.

Hi JDW, the example that you showed are both just images. It’s not hard to do with Blocs.
I made a simple video below that shows how to do this in Blocs.

Casey

http://hicontentdesign.com/lightbox.mp4

2 Likes

Also, with Blocs 3.2 (Beta coming this week?) will introduce a Modal Bric.

Bootstrap Modals

Just so you know that will be coming. :wink:

2 Likes

Casey, my humble and sincere thanks for making time to create that excellent walkthrough video! Thank you!

The only down side is that I sometimes want to have a clickable word of text to accomplish the same thing. When I make a word (inside a paragraph in Blocs) a link and then when I click on the Interactions > Type popup, I don’t see Lightbox. Should I make a feature request for this, or is there a workaround?

And thank you, Blocs_User, for the tip about the forthcoming feature in 3.2. That looks interesting, but I’m curious what’s possible when clicking on a text link.

Thanks,

James W.

That will also be a very nice addition. I can’t wait to try it. I used my example because of the site JDW showed uses images.

Thanks
Casey

So it’s completely impossible to trigger a lightbox using a text link as the trigger, is that correct? No workarounds?

(I can do that in Freeway, which is why I ask.)

Well, there are always workarounds, but it does take work. Maybe that’s why they call it “work” around. Some might know some code, inside a paragraph would be harder but a small text image could be used at the end of a paragraph.

I’m not sure what the model bloc will let us do until its released.

Casey

Nice job showing how one can do this. :grinning:

1 Like

I will therefore add it to the Wish List then, citing this thread as a reference.

Thanks,

James W.

I can’t really speak towards the forthcoming Blocs implementation of the Bootstrap modal. But in vanilla development you can open them from a text link and include links within them. They are basically just containers for content, so things like text, forms, buttons, images, videos, iframes, etc. But I’m unsure as to how Blocs will implement the ability to include, structure and style content within them or launch them in the app visually?

We will soon see I suspect.

1 Like

Can’t wait to see what we can do with it. Very exciting new feature.

Casey

1 Like

I’m not in front of v3 but tried in v2 (in case it changed). In the visual interface it appears that the “Interactions” + “lightbox” in the sidebar works for images. For URL links or text spans the interactions do not include the option for “lightbox”. So only @norm would know as to why that is the case currently or if he would be able to open it up to include more things beyond only lightbox interaction from images.

Hopefully the forthcoming modal will also be flexible and the lightbox can also be expanded.

#wish-list