Pop-Up/LIghtbox

Hey northorie,
To create a text box popup add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function magnific_popup_with_no_scroll() { ?>
  <script>
(function($) {
  $(window).on('load', function(){
    $('.open-popup-link').addClass('no-scroll');
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true,
      callbacks: {
        beforeOpen: function () {
          $('body').css("overflow-y", "hidden");
        },
        close: function() {
          $('body').css("overflow-y", "auto");
        },
      },
    });
  });
  })(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'magnific_popup_with_no_scroll', 99 );

Then on the page you want the popup to show on add this into a code block:

<div id="open-popup" class="popup mfp-hide">
<p>PLACE CONTENT HERE</p>
</div>

change the “PLACE CONTENT HERE” text to suit your needs, including adding a image.
Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

Here is an example with a image in the popup:

Best regards,
Mike

Hi,
To enable a button to open the popup, add a button to your page and set the link URL to #open-popup:

then go to Advanced ▸ Developer Settings and add the custom class open-popup-button:

then update the popup script in your child theme functions.php to this:

function magnific_popup_with_no_scroll_and_button() { ?>
  <script>
(function($) {
  $(window).on('load', function(){
	$('.open-popup-button a').addClass('open-popup-link');
    $('.open-popup-link').addClass('no-scroll');
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true,
      callbacks: {
        beforeOpen: function () {
          $('body').css("overflow-y", "hidden");
        },
        close: function() {
          $('body').css("overflow-y", "auto");
        },
      },
    });
  });
  })(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'magnific_popup_with_no_scroll_and_button', 99 );

then you can use both text links and buttons for your popup like in the example:

Best regards,
Mike

Hi,
On my test page I added two more buttons with the URLs #open-popup3 and #open-popup2

and adjusted the code blocks to match:

and they work correctly:

try checking your code again.

Best regards,
Mike

Hi,
It looks like you are not using the new code that I posted above that allows buttons to be used.
It also looks like you didn’t add the custom class to the buttons for the new script to work, please review this thread again.

Best regards,
Mike

Hi,
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,
Mike