Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #830477

    Hello,

    I would like to accomplish opening a popup modal using a button from the slider, or any other button.

    I searched the forums and found this to be useful:
    https://kriesi.at/support/topic/contact-form-in-pop-up-prettyphoto-issue/

    I added the code to functions.php and Custom CSS.
    Added a text block in the home page at the bottom to test it, and it works great.

    Yet, I would like to make this work using one of the buttons in the slider or buttons in other pages. I don’t see how can I add the class.

    Could you please point me in the right direction on how to accomplish that?

    • This topic was modified 6 years, 9 months ago by hobeja7.
    #831660

    Hey hobeja7,
    Try coping the html code of the button from the slider, like this:

    <a href="manually" class="avia-slideshow-button avia-button avia-color-light avia-multi-slideshow-button" data-duration="800" data-easing="easeInOutQuad">Learn more</a>

    edit it with your class for your popup, and put it in the caption box of a slide. You can disable the buttons of that slide, and it will show on the front end.
    postimage
    postimage

    Best regards,
    Mike

    #831986

    That works, thanks Mike.

    The original slider allows you to have two buttons. I had them both.

    When I hardcode the button, the other now stays below.
    How would I go about moving the other button next, as it was previously ?

    #833936

    Hi,

    I enabled “Show element options for developers” in Enfold theme options > Layout Builder, edited your slider and gave it a custom CSS class “home-slider” and then added your button as second button to your caption and then added following line to your existing code in functions.php file in Appearance > Editor

    
    jQuery('.home-slider .avia-slideshow-button:nth-child(4)').addClass('open-popup-link');

    Please review your website :)

    Best regards,
    Yigit

    #833989

    Wow! That’s awesome! Thanks Yigit!

    I didn’t know about the extra classes. It would be nice to have something like the Visual Composer “Classic View” in Enfold, that allows you to see the code of the current visual layout.

    Can I use a function like that for all buttons, to always add the open-popup-link class?
    I’m guessing something like this:
    jQuery('.popup-button .avia-button.addClass('open-popup-link');

    I would just add the popup-button Custom CSS Class to the buttons that need to open a modal-like button.
    Please correct me if if that would not work as desired.

    #834006

    Hi!

    1- Please refer to this post – http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/ and enable debugging mode to see shortcodes of ALB elements below your content :)

    2- You can simply save your slider as a template and load on your pages. It would work fine just as it does on homepage as long as your custom slider has “home-slider” class and second button

    Cheers!
    Yigit

    #834053

    1. Awesome! Thanks for the info Yigit!
    That was exactly what I was looking for.

    2. Oh, I don’t plan to use Magnific Popup only with sliders. That’s why I was asking if it could be added to buttons.
    I’m using the Magnific Popup functionality in the “Services” page, in a box. It had a button there before, but I changed it with code.
    If the functionality can be added to buttons with the use of a specific class, it would kind of save the end user from using more code :)

    • This reply was modified 6 years, 8 months ago by hobeja7.
    #834788

    Hi,

    You can add “pu-button” custom CSS class to your buttons elements and it should work fine as well. I adjusted the code in Functions.php file a little :)

    Best regards,
    Yigit

    #835577

    Thank you so much Yigit!
    Your awesome support is what makes of this theme a great thing :)

    Have a good day!

    #835635

    Hi,

    Glad that Yigit helped you. Thanks for using Enfold :)

    Best regards,
    Nikko

    #1016961

    Hi Yigit

    I have a similar requirement to have popups working from links and buttons.
    I got the links to work okay, but you didn’t actually show what you added to the existing code in functions.php to make buttons work.

    The code I have at the moment is:

    function popup_inline() { ?>
    <script type="text/javascript">
    jQuery(window).load(function(){
    	jQuery('.open-popup-link').magnificPopup({
    	  type:'inline',
    	  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    	});
    });
    </script>
    <?php }
    
    add_action('wp_head', 'popup_inline');
    

    Could you please show how the button code should be added?

    Many thanks

    #1017003

    Hi,
    To use theme buttons as the popup trigger, first be sure the button link is set to manual and the link is “#test-popup” or the same ID as your box.
    Then add a custom class to your button “pu-link”
    2018-10-02_055745
    this option is added at: Enfold Theme Options > Layout Builder > Show element options for developers
    Then in your script you will need to add:

    jQuery('.pu-link a').addClass('open-popup-link');

    like this:

    function popup_inline() { ?>
    <script type="text/javascript">
    jQuery(window).load(function(){
           jQuery('.pu-link a').addClass('open-popup-link');
    	jQuery('.open-popup-link').magnificPopup({
    	  type:'inline',
    	  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    	});
    });
    </script>
    <?php }
    
    add_action('wp_head', 'popup_inline');

    Best regards,
    Mike

    #1017151

    That’s great Mike; it works perfectly.
    Thank you very much for your help!

    #1017266

    Hi,

    I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Open popup modal with Button’ is closed to new replies.