Another Share.

After reading these posts:

https://kriesi.at/support/topic/open-form-in-a-lightbox-popup/

https://kriesi.at/support/topic/inline-content-in-magnific-popup/

These solutions were difficult.

The current problem with Enfolds is that only certain AVIA LAYOUT BUILDER – LAYOUT ELEMENTS allow for a custom Developer ID.

The issue with each of theses layout elements (Colour Section, Grid Row, Tab Section ) is that they are all full width and interfere with the side bar position. Not good if you are adding a linline popup link. And the popup content has to be inside a ‘Colour Section’.

I should note that you can add a custom ID to a [CODEBLOCK] [/CODEBLOCK], However this didn’t work either as paragraphs <p></p> were stripped from the HTML and replaced with inverted commas “” loosing any paragraph styling.

AVIA LAYOUT BUILDER would be more flexible if we had the ability to add theme support for custom ID on layout elements, the same way you currently add theme support for ‘Custom Css Class’…

add_theme_support('avia_template_builder_custom_css');

Any way, I though I would share my quick [SHORTCODE] solution with the community.

Enfolds out of the box already supports lightbox modal windows for videos and images. This solution allows you to display large amounts of formatted text like; terms and conditions, privacy statements, warranty etc. in a lightbox modal window.

Lets get started.

As Magnific Popup is installed natively with Enfolds Theme, we don’t need to load any other assets.

——————————————————————————-
PHP
In your child-theme functions.php file add the following code:

/*-------------------------------------------------------------------------------
INLINE POP UP ENABLER
-------------------------------------------------------------------------------*/
function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).load(function() {
    	$('.inline_popup').magnificPopup({
    	  type:'inline',
    	  midClick: true 
    	});
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'inline_popup_enabler');

/*-------------------------------------------------------------------------------
	SHORTCODE  - INLINE POST CONTENT POP-UP	
	[mfp_post_popup post_slug_id="" popup_id="" link_text="" custom_class=""]
-------------------------------------------------------------------------------*/

function mfp_post_popup_shortcode( $atts ){

	//default values
    extract( shortcode_atts([
        'post_slug_id' => '',
        'popup_id' => '',
        'link_text' => 'hello',
        'mfp_hide' => 'mfp-hide',
        'custom_class' => 'mfp_popup_content'
    ], $atts ) );
    
	//get post content
    $pop_slug = get_post($post_slug_id);
    $content = apply_filters( 'the_content', $pop_slug->post_content );

	//output post content into the footer before the closing body tag - content is hidden 
    add_action('wp_footer', function() use($content, $popup_id, $mfp_hide, $custom_class) {
        echo sprintf(
            '<div id="%s" class="%s %s">%s</div>',
            $popup_id,
            $mfp_hide,
            $custom_class,
            $content
        );        
    });
    //output popup link
    return sprintf(
        '<a class="inline_popup" href="#%s">%s</a>',
        $popup_id,
        $link_text    
    );

}
add_shortcode( 'mfp_post_popup', 'mfp_post_popup_shortcode' );

——————————————————————————-
CSS
In your child-theme/style.css file add the following CSS:

.mfp_popup_content {
	position: relative;
	background: #ffffff;
	padding: 40px;
	width: auto;
	max-width: 600px;
	margin: 100px auto;
	overflow: auto;
  }

This CSS class is all you need to style the popup window. As this is a custom_class you can change the name of the class in the code or override the default class name by adding custom_class”” to the shortcode. and style to your hearts content. Rounded Corners, Colour Border, Coloured Background etc. etc.

——————————————————————————-
CONTENT
First create a new PAGE or POST with the content you want to display in your popup and publish.
Take note of the post ID, which can be found in the URL address bar at the top of the browser http://domainname.com/wp-adminpost.php?post=

——————————————————————————-
SHORTCODE
On your page where you want to popup the content, add the following inline [SHORTCODE]:

[mfp_post_popup post_slug_id="" popup_id="" link_text=""]

post_slug_id=””
Enter the ID of the post that you want as content in your popup window.
Example: post_slug_id="5"

popup_id=””
Enter a custom identifier for the popup. For multiple popup’s on one page, use a different identifier for each popup_id. Don’t use spaces in the ID name. You can use underscore _ and dash – in place of spaces.
Example: popup_id="popup_1"

link_text=””
Enter the text ( spaces are allowed ) that will be the active link for the popup.
Example: link_text="open me"

EXAMPLE:
Some custom content here with in line link to [mfp_post_popup post_slug_id="5" popup_id="popup_1" link_text="open me"] in a popup window.

——————————————————————————-
EXPLINATION

The code does 3 things:

1. Adds a jQuery script to the footer that enables Magnific popup for elements with a class .inline_popup

2. Creates the active link where the [SHORTCODE] is inserted

<a class=”inline_popup” href=”#popup_id”>link_text</a>

3. Creates a hidden div in the footer that contains the content from the post_slug_id

<div id=”popup_id” class=”mfp_hide custom_class”>content</div>

——————————————————————————-
TWEAKS

You may find that not all custom theme style colours translate into the magnific popup modal window. However by adding some additional css styles you can target the elements again.

.main_color blockquote { border-color: #c3512f; }

Change this by add additional CSS to your child-theme’s style.css file

#top .mfp_popup_content blockquote { border-color: #c3512f; }

That’s about it.

Please Share