The Magnific Popup doesn't work with Buttons - Support | Kriesi.at

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
April 20, 2015 at 6:06 am #431095
prohronus
Participant
Hello.

Please help me with this issue.
I’m experiencing the problem with setup Magnific Popup Light Box on bottons.
I used this instruction: https://kriesi.at/support/topic/open-form-in-a-lightbox-popup/ and in others cases it works great actually, but not for buttons.

Please check this sample page: http://leolombard.kz/sample-page/

My guesses that class=”inline_popup” is on the one level upper than href=”#content-to-open”>

But i put class=”inline_popup” as usual in Custom Css Class field.

Thank you in advance for your help.
- This topic was modified 9 years, 7 months ago by prohronus.
April 21, 2015 at 5:46 am #431755
Ismael
Moderator
Hey prohronus!

Thank you for using Enfold.

Add this in the functions.php file:
```
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
    $('.inline_popup a').addClass('inline_popup');
})(jQuery);
</script>
<?php
}
```
Remove browser cache then reload the page.

Cheers!
Ismael
April 22, 2015 at 2:06 pm #432779

prohronus
Participant

Hello Ismail.
Thank you very much.
I paste this code in my child function.php. but there is some error.

April 22, 2015 at 2:07 pm #432780

Yigit
Keymaster

Hi!

What exactly is the error? Can you please elaborate?

Best regards,
Yigit

April 22, 2015 at 2:08 pm #432781
prohronus
Participant
Here is how fuction.php (child) looks now
```
<?php
add_theme_support('avia_template_builder_custom_css');
function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).load(function() {
      $('.inline_popup').magnificPopup({
        type:'inline',
        midClick: true 
      });
    });
})(jQuery);
</script>
function ava_custom_script(){
?>
<script>
(function($){
    $('.inline_popup a').addClass('inline_popup');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'inline_popup_enabler');
add_action('wp_footer', 'ava_custom_script');
```
April 22, 2015 at 4:50 pm #432947

prohronus
Participant

Here is example page http://leolombard.kz/test21/
Button module start the in-line light box, but the content is not showing up

April 23, 2015 at 4:52 pm #433591
Elliott
Inactive Moderator
Hi!

Try this instead.
```
<?php
add_theme_support('avia_template_builder_custom_css');
function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).load(function() {
      $('.inline_popup a').magnificPopup({
        type:'inline',
        midClick: true 
      });
    });
})(jQuery);
</script> ?>
}
add_action('wp_footer', 'inline_popup_enabler');
```
Cheers!
Elliott
April 24, 2015 at 3:11 pm #434154

prohronus
Participant

Hello Elliott.
Thank you for helping me.
With your code it start it to work with button, but stop work for not .inline_popup a cases.
Please provide the code where this two situation can be united: $('.inline_popup a').magnificPopup and $('.inline_popup').magnificPopup

April 25, 2015 at 4:06 am #434550
Ismael
Moderator
Hi!

Please remove all the code then replace it with this:
```
add_action('wp_footer', 'inline_popup_enabler_2');
function inline_popup_enabler_2(){
?>
<script>
(function($){
    $(window).load(function() {
      $('.inline_popup a').magnificPopup({
        type:'inline',
        midClick: true 
      });
    });
})(jQuery);
</script> 
<?php
}
add_action('wp_footer', 'inline_popup_enabler_1');
function inline_popup_enabler_1(){
?>
<script>
(function($){
    $(window).load(function() {
      $('.inline_popup').magnificPopup({
        type:'inline',
        midClick: true 
      });
    });
})(jQuery);
</script> 
<?php
}
```
Make sure that you place it below the line:
```
<?php.
```
Cheers!
Ismael
April 25, 2015 at 10:42 am #434660

prohronus
Participant

Hi Ismael.
I alredy tried same code before and for some reason it not working.
Separartly function for //$(‘.inline_popup’).magnificPopup// and for //$(‘.inline_popup a’).magnificPopup// works fine, but not together .
//inline_popup// trigers works ok
//inline_popup a// hides main content but not shows popup window.
http://leolombard.kz/test21/

April 27, 2015 at 6:51 am #435037
Ismael
Moderator
Hey!

Ok. I checked the code again here: https://kriesi.at/support/topic/the-magnific-popup-dont-work-with-buttons/#post-432781

I noticed that it’s incorrect. Please replace it:
```
add_theme_support('avia_template_builder_custom_css');

add_action('wp_footer', 'inline_popup_enabler');
function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).load(function() {
      $('.inline_popup').magnificPopup({
        type:'inline',
        midClick: true 
      });
    });
})(jQuery);
</script>
<?php }

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
    $('.inline_popup a').addClass('inline_popup');
})(jQuery);
</script>
<?php
}
```
Make sure to add it below this line:
```
<?php
```
If it doesn’t work, please post the login details here. We would like to check it.

Regards,
Ismael
April 27, 2015 at 7:49 am #435066

prohronus
Participant

This reply has been marked as private.

April 28, 2015 at 8:28 am #435848
Ismael
Moderator
Hey!

Hmm.. I’m not sure why it’s not working, maybe there’s a conflict between the button and the magnific popup script. Instead of the button, use a simple link then add the style of the button to it:
```
.inline_popup {
padding: 15px 30px 13px;
font-size: 13px;
min-width: 139px;
background-color: #2d5c88 !important;
border-color: #0b3a66 !important;
color: #ffffff !important;
border-radius: 3px;
text-decoration: none;
display: block;
border-bottom-style: solid;
border-bottom-width: 1px;
margin: 3px 0;
line-height: 1.2em;
position: relative;
font-weight: normal;
text-align: center;
max-width: 100%;
float: left;
}
```
Best regards,
Ismael
March 16, 2017 at 1:12 pm #761868

architchandra
Participant

Hi

I was trying to use this solution but found out that the .load event has been deprecated and removed as of jquery version 3.0. In that case, how to I use a button target to open a modal/popup window? Also, I’d like to know which version of jQuery does Enfold use?

Thanks.

March 20, 2017 at 6:37 am #763495

Ismael
Moderator

Hi,

The theme has the version that WordPress is using, 1.12.4. It is a relatively old version of jQuery so the function should work properly.

Best regards,
Ismael
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.