Tagged: , , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 27, 2017 at 7:43 am #830477
    hobeja7

    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 7 years, 3 months ago by hobeja7.
    July 30, 2017 at 5:01 am #831660
    Mike

    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

    July 31, 2017 at 8:00 am #831986
    hobeja7

    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 ?

    August 3, 2017 at 3:57 pm #833936
    Yigit

    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

    August 3, 2017 at 8:01 pm #833989
    hobeja7

    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.

    August 3, 2017 at 8:56 pm #834006
    Yigit

    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

    August 3, 2017 at 10:14 pm #834053
    hobeja7

    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 7 years, 3 months ago by hobeja7.
    August 5, 2017 at 2:24 pm #834788
    Yigit

    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

    August 7, 2017 at 8:08 pm #835577
    hobeja7

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

    Have a good day!

    August 7, 2017 at 11:45 pm #835635
    Nikko

    Hi,

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

    Best regards,
    Nikko

    October 2, 2018 at 10:41 am #1016961
    ThisTime

    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

    October 2, 2018 at 12:02 pm #1017003
    Mike

    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

    October 2, 2018 at 4:59 pm #1017151
    ThisTime

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

    October 3, 2018 at 12:53 am #1017266
    Jordan Shannon

    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

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