Topic Tag: Content Templates

Problem: I have a View that displays posts. I would like to add a button to each result that triggers a popup dialog with more information about each post. Is there a plugin or addon available for displaying popups with Toolset?

Solution: Toolset does not provide a built-in popup or modal dialog component, but gives you the ability to enqueue the Bootstrap library in Toolset > Settings > General.

The Bootstrap library comes with a built-in modal component that can be used to display popups like you have described.

There is no built-in integration for modals like these in the Block Editor, so custom HTML is required. After enabling the Bootstrap 4 library, add custom HTML to trigger and display modal overlays in your Content Templates and Views. You can place this code in a custom HTML block or in a separate Content Template, then embed that template with the Content Template block. Here is the HTML for an example modal, including the post title in the modal header and the post content and a simple custom field in the modal body:

<!-- Movie modal trigger button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#movieModal-[wpv-post-id]">
  View More
</button>
 
<!-- Movie modal -->
<div class="modal" tabindex="-1" id="movieModal-[wpv-post-id]" aria-labelledby="movieModalLabel-[wpv-post-id]" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Movie modal header -->
      <div class="modal-header">
        <h5 class="modal-title" id="movieModalLabel-[wpv-post-id]">[wpv-post-title]</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">x</span>
        </button>
      </div>
 
      <!-- Movie modal body -->
      <div class="modal-body">
        <!-- modal body showing the main post content and a simple custom field -->
        [wpv-post-body view_template="None"]<br />
        [types field="my-field-slug"][/types]
      </div>
 
      <!-- Movie modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

If you place this code in a custom HTML block in your View's loop, a modal will be generated for each item in the loop and a button will be displayed to open the corresponding modal. Notice I have used the wpv-post-id shortcode in the modal structure to create dynamic, unique IDs for each modal in the loop of results. Dynamic IDs are necessary to connect the triggers and modals for each item in the results. You can modify this example code to include your Toolset Types custom fields and other content using our shortcode library.

Relevant Documentation:
https://getbootstrap.com/docs/4.6/getting-started/introduction/
https://getbootstrap.com/docs/4.6/components/modal/
https://toolset.com/documentation/customizing-sites-using-php/functions/
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/