Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1415445

    I have three buttons on one page, each should open to view that person’s bio.

    I’ve placed this code into the functions.php file in my child theme, which I obtained from the forum:
    function popup_inline() { ?>
    <script type=”text/javascript”>
    jQuery(‘.pu-link a’).addClass(‘open-popup-link’);
    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don’t provide alternative source in href.
    <?php }

    add_action(‘wp_head’, ‘popup_inline’);

    • My Buttons have this CSS Class: pu-link
    • Then I have a section on the page with each of the 3 Bios and I’ve created a middle column for each – wanted them centered when they popup. Each column with each bio has it’s own id – with their names, and then the custom css class “mfp-hide” – also gave the section the class mfp-hide, So they are hidden and do appear on pop up.

    Two things I wonder if you could help me fix:

    1. When you click on the buttons, while the popup is appearing, the website behind the popup scrolls up behind it – not sure why it’s doing that but would like to remove that, stop it from doing that. And on a cell phone it scrolls up to the top of the website with an overlay on top, then you have to scroll back down to the pop up, which also isn’t appearing on the whold screen, like left 2/3rds.

    2. All 3 Pop Ups appear on the left instead of centered – even though I’ve made it a 3/5th column in the middle of two 1/5ths. Is there a way to center these like a typical popup?

    I fear I’ve missed an important step to getting htis all working properly and wonder if it has to do with the css which I did not find related to .mfp-hide?

    Thank you


    Hey Eleina,
    Thank you for the link to your site, to center the popup I removed the 1/5 empty columns on each side of your popup columns:
    then I added this css to your WordPress ▸ Customize ▸ Additional CSS:

    .mfp-content #yolanda.flex_column,
    .mfp-content #keaver.flex_column,
    .mfp-content #kenita.flex_column {
    	float: none;
    	margin: auto;

    To stop the page from scrolling with the popup shows I adjusted your script to add the class no-scroll to the popup.
    Please clear your browser cache and check.

    Best regards,


    This is excellent. As always, thank you for your prompt and professional support. Enfold is so powerful as a result and I cannot thank you enough – it looks great now!


    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Open an Element in a PopUp/LightBox upon click of a Button’ is closed to new replies.