Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 2, 2021 at 3:13 pm #1327488
    Monika

    Hello,

    I put some code* behind the Link “Buchen”.
    A popup opens, and the hidden color-Section #content-to-open is shown in this popup.

    Now the client wants a button instead of a link.
    I tried it in the Block “Challenge B” and put a Button Element in it.
    The #content-to-open is linked, but where can I tell the Button to open as a popup?

    * Buchen

    November 3, 2021 at 3:00 am #1327548
    Ismael

    Hey Monika,

    Thank you for the inquiry.

    How did set the content to open inside a lightbox? You may need to apply a custom css class name or ID to the button in order to trigger the lightbox popup.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    November 9, 2021 at 6:02 pm #1328384
    Monika

    Thank you.

    the code behind the link is:
    Buchen

    The a class “open-popup-link” is the one who is responsible for opening the content in a popup.
    I found the information that the a class “open-popup-link” is a feature already provided by enfold and it works.

    But what would the Code be for the Button?

    November 10, 2021 at 1:09 pm #1328481
    Mike

    Hi,
    Thank you for the link to your site, the popup links work because they have the custom class open-popup-link to add this class to your buttons with the link #content-to-open Try adding this code to the end of your functions.php file in Appearance ▸ Editor:

    function custom_script() { ?>
    <script>
(function ($) { 
  $('[href="#content-to-open"].avia-button').addClass('open-popup-link');
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

    Best regards,
    Mike

    November 12, 2021 at 6:19 pm #1328811
    Monika

    YES!! That worked.

    THANK YOU SO MUCH, You made my day 🥳

    November 12, 2021 at 6:40 pm #1328814
    Monika

    One Last thing :)..

    On mobile, the Popup opens, and then an animation pushes the color section down in an invisible area. I have to scroll down to see the popup.
    Can I tell the Colorsection to always show up in the visible area?

    November 13, 2021 at 1:17 pm #1328866
    Mike

    Hi,
    Glad to hear this helped, to prevent the popup scroll try adding this code to the end of your functions.php file in Appearance ▸ Editor:

    function prevent_popup_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', 'prevent_popup_scroll');

    Best regards,
    Mike

    November 19, 2021 at 10:21 pm #1329747
    Monika

    Great!! Thank you so much, it looks so nice now. :))

    November 20, 2021 at 1:07 am #1329751
    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

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Where to put a code behind button’ is closed to new replies.