Skip Navigation

[Resolved] 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 3 years, 11 months 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+00:00)

This topic contains 3 replies, has 2 voices.

Last updated by perryA 3 years, 11 months ago.

Assisted by: Jamal.

Author
Posts
#1615279

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

#1615473

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

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

#1617035

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

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.

#1619697

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.