How to add a custom code for creating popup window with text for bios

Hello,

I am trying to add a custom code for creating a popup window with text. How does one go about it? 

I am using the Nolan layout 7.1 and my Meet the team page has about 20 photos of people with names. It is set in a carousel style layout. Each section has 6 people in it. Screen grab below. 

Would I would like for it to do is when clicked on name/or a text that says "Read bio" a pop should open with text and then close out when not on hover or with a little x sign.

Any help/suggestions much appreciated

Thank you, 

Sneha

This answer is from an older thread but I think it should still work for you. It will not work for any gallery block that doesn't have lightbox option, like a carousel, reel,  slideshow. You can use it for strips. 

Yep, you can do this with some Custom CSS. On yourpage where the Gallery is, go to each image and enter the "bio" text into the Title/Description fields for each image. [edit] You must also enable "Lightbox" in the Gallery's Design Tab! 

Under that page's SETTINGS pane, go to the Advanced Tab and add this code to the "Page Header Code Injection

 <style>
div.sqs-lightbox-meta {
 background-color: rgba(255, 255, 255, 0.500);
 height: 90%;
 padding: 50px !important;
}
.yui3-lightbox2 .sqs-lightbox-meta {
 opacity: 100;
 color: #000;
 font-size: 40px;
}
</style>

Thank you Derrick. I have done the above and it does not seem to work. 

There is a light box that pops up but with the image not the text. 

I have tried all alternatives but nothing seems to be working. 

I suggest you post a link to your site and give some coders here a chance to look at it and see if they can provide the precise code to make it work. I have found code for the older 7.0 sites, which is what i posted, but I don't think it will work with yours. Here is one, the original poster is using a different hosting service as of now. 

On 10/28/2021 at 9:35 PM, Sneha_S said:

Thank you Derrick. I have done the above and it does not seem to work. 

There is a light box that pops up but with the image not the text. 

I have tried all alternatives but nothing seems to be working. 

 

Hi.

To click read more >> show lightbox, you can use Lightbox Plugin.

If you want hover effect only, I mean hover read more >> show lightbox. We can try this approach

• First, add some text before read more
• Next, share link to page in screenshot
• I will give the code to hide these text
• & add code to when hover read more >> show text & adjust text position, of course

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

Hi there,

I thought I would ask here to see what I want to do is possible.

I'm looking for a way to add a lightbox on a "Meet the Team" section on my website so when a user presses "Read Bio" or "Click here" it won't route them to another page but just open a window to read more. 

I know about the Lightbox anything plugin but I was wondering if there was a way around this using something like Featherlight. I figure the way I've edited this section has made it more difficult to just have a description.

Thanks

The easiest way is use Lightbox Plugin

Another approach is show more text under click here, when clicking it, use CSS/Script code.

What do you think?

We shouldn't have to purchase a plugin to do this. It would be a great feature to have included.

Is there another way to add this besides the plugin?

We can use custom code, but it is more time consuming.

Lightbox Plugin will use content from Not Linked Page.

We can use section in Footer, it means, you can create some section in Footer, I can give CSS code to hide it. And when users clicking on each button in List Section >> Open a Lightbox with content get from corresponding section in Footer.