How To Open Easy Post Content in Modal Overlay with Oxygen Builder

Published: August 11, 2019,  
Posted in: ,  
Tags:

On a recent project, I struggled with trying to get a clients site opening custom post types from an Easy Posts query. They needed to allow users to view projects quickly and have a navigation.

See it in action below or visit https:/ksn.ie/projects :

I tried accessing various sources for help but the solution never quite did what I wanted.

After posting my struggle on the Facebook group and Briany Hearne helped with the following solution for which I am truly grateful.

Essentially I had a custom post type called projects with some custom ACF fields including an ACF gallery field for project images. I created a blank template that applied only to this custom post and inherited no other templates as I didn't want the footer and nav on these posts.

I also included the 'previous' and 'next' posts tags in the template as this would let users navigate between projects quickly.

Once the post template was complete, I went to where they would be viewed from.

1. Create a modal, style it how you wish. I added a modal to the page displaying the post query, which, in this case was Projects. I setup the modal so it displayed across all devices.

2. Use the click trigger to display the modal using the js-trigger-iframe class.

3. Add the following jQuery to a code block on the page displaying the post query.

jQuery( document ).ready( function($) { $('.js-trigger-iframe').click(function(){ $this = $(this); if ($this.attr('href') && $this.attr('target')){ $('iframe[name="' + $this.attr('target') + '"]').attr('src',$this.attr('href')); } }); $('.oxy-close-modal, .oxy-modal-backdrop').click(function(){ $('.ct-modal').find('iframe').removeAttr('src'); }); });

4. Add this to the code block html:

<iframe src="" width="100%" height="100%" name="myiframe"></iframe>

5. Make sure the code block is set to the same height as the modal container. Add the class to the php template around the post link along with the target element below.

target="myiframe"

Essentially anything wrapped in the js-trigger-iframe class will open in an overlay once the modal has been added as above.

I can see a lot of use cases for this and it also has the bonus of being navigatable if the template showing the content has the previous and next tags included.

In order to make sure the modals were scrollable on mobile, I had to add this to the modal parent to enable it on IOS:

overflow:auto; -webkit-overflow-scrolling:touch;

I will be keeping this post up to date in case of any code changes as I know it is something I will use on many clients sites.

Love to know in the comments if you find it useful.

3 comments on “How To Open Easy Post Content in Modal Overlay with Oxygen Builder”

    1. Many thanks Ros. I keep meaning to share more as its a great way of referencing how I did things and I'm always happy to help others. Really you found it useful and appreciate you taking the time to comment.

  1. Hi,
    I'm having a few issues implementing this tutorial, would you be able to answer a couple of questions, I am 100% sure it is me doing something stupid
    Andy

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Notified Of New Posts
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram