Skip to content

Documentation

Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

PowerPack

⌘K
  1. Home
  2. Docs
  3. PowerPack
  4. Modules
  5. Modal / Popup Box
  6. How to show post content in Modal Popup Box?

How to show post content in Modal Popup Box?

PowerPack v2.21.0 introduces a feature that you can use to link the Modal Box in Content Grid or any posts module that supports Beaver Themer’s Custom Layout feature. It allows you to display the post content in modal popup.

Let’s see how to connect the Modal Box with Content Grid and show the post elements in the popup box.

Add Modal Box to the page

Drag & Drop the Modal Box module of PowerPack to display the post content in modal popup.
Drag & Drop the Modal Box module

Configure the Modal Box

General tab > Content

  1. Set the “Enable Title” to “No”
  2. Set the “Type” to “Raw HTML”
  3. Add HTML comment <!-- pp-modal-post-template --> into the HTML field. Please note that it is important to add this HTML comment to recognize the template.
  4. Add your own HTML and build the template. You can click on the field connection “+” icon and insert the shortcodes related to the post into the HTML field. These field connections will only appear if you have the Beaver Themer plugin installed and active.
Modal Box Post Template Configuration to display the post content in modal popup.
Modal Box Post Template

Settings tab > Trigger

  1. Set the “Trigger” to “Custom Element Click”
  2. Add a class to the field “Your own Class/ID”. We are using the “post-quick-view” class in this example. Please note you must prefix your class with a dot “.” and do not add the ID.
  3. Save the module.
Configure Modal Box Trigger type and CSS class to display the post content in modal popup.
Modal Box Trigger type and CSS class

That’s it. We have configured the Modal Box, keep it on the page and now let’s configure the Content Grid module.

Add Content Grid to the page

Drag & Drop the Content Grid module
Drag & Drop the Content Grid module

Configure the Content Grid module

  1. Select the “Custom” style from the dropdown
  2. Now click on “Edit Custom Layout”
Configure the layout in Content Grid
Configure the layout in the Content Grid

Edit Custom Layout

Add the class “post-quick-view” that was provided in the Modal Box to the anchor tag of the “Read More” button in the custom layout’s HTML.

Add CSS class to the anchor tag in the custom layout of Content Grid
Add CSS class to the anchor tag

Tip: If you are using the regular Posts module or any other posts module then you must add another attribute to the anchor tag i.e. data-pp-modal-post=[ wpbb post:id ]

Please remove the space inside the shortcode brackets after copy/paste from here.

Now, save everything and just publish the page. After publishing the page, do a refresh and click on the “Read More” link of the post.

Modal Box with the post content
Modal Box with the post content

You can further style the post elements in the Modal Box within the “CSS” section under Beaver Builder’s Layout settings or Global settings.

×