Fill a pop-up with custom post content

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user would like to have a popup/modal window in one of his Toolset pages.

Solution:
Toolset does not offer such an element as Popup or Modal. On the other hand, Toolset can load Twitter Bootstrap (versions 3 or 4), Twitter Bootstrap includes a modal element which can be used then to create the desired user experience/interface.
Check this video about Bootstrap modals. https://www.youtube.com/watch?v=bT9Tta7xWdo

You can embed a modal for each item of the view. Wrap the headshot image inside a tag and configure it to open its modal.
Note that "id" in the modal or the buttons MUST be unique through the page. Use [wpv-post-id] in id with a prefix to ensure unique ids (e.g. "modal-[wpv-post-id] or close-[wpv-post-id]" ).

This support ticket is created 5 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

Tagged: Views, Views plugin

This topic contains 3 replies, has 2 voices.

Last updated by perryA 5 years ago.

Assisted by: Jamal.

Author

Posts

May 7, 2020 at 1:49 pm #1615279

perryA

Tell us what you are trying to do? I'm trying to set up a Team page -- where a set of headshots are in a grid, and when a headshot is clicked, a pop-up comes up with the post content. Right now the pop-up comes up, but there is no content in it (there is no option to link post content to a pop-up that I can see). Also -- on the page with the headshots, once you click on a headhsot (and the empty pop-up comes up and you close it) if the user clicks on another headshot nothing happens.

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?hidden link

May 7, 2020 at 4:15 pm #1615473

Jamal

Hello and thank you for contacting the Toolset support.

I visited the page, but no popup was opened on click, only animation on hover. I suppose you have changed the view.

I am curious to know how do you build the popups? Is it with bootstrap or using Elementor? Can you record a short video on how you create a popup and allow me temporary access to check your view closer?

Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

May 8, 2020 at 2:34 pm #1617035

Jamal

Hello Perry,

Check this video, it explains how to use Bootstrap modals from Bootstrap 3. There are other videos about using Bootstrap 4.
hidden link

You can embed a modal for each item of the view. Wrap the headshot image inside a <a> tag and configure it to open its modal.
Note that "id" in the modal or the buttons MUST be unique through the page. Use [wpv-post-id] in id with a prefix to ensure unique ids (e.g. "modal-[wpv-post-id] or close-[wpv-post-id]" ).

I hope this gives some ideas on how to build it. Let me know if you have any questions.

May 11, 2020 at 11:20 am #1619697

perryA

My issue is resolved now. Thank you!