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.)