MFP: second close button / function - Support | Kriesi.at

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

Author

Posts
June 14, 2020 at 1:59 pm #1222473

eee_lala
Participant

Dear Kriesi folks,

for a text-overlay I used the mfp-hide function with color sections to overlay text info on click / demand.
One of the info paragraphs is more than screen filling, so you could not click outside to close and the upper button is far outside of the view.
The close button itself seems to be possible only on the top right, a second one is just not displayed. Before I mess around with divs and stuff:
How could I add another close button in the bottom right? Is there a sleak way to achieve that?

Thanks!

June 21, 2020 at 12:53 am #1224326
Mike
Moderator
Hey eee_lala,
Sorry for the late reply, to move the close button, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
div.avia-popup .mfp-close {
    top: 100% !important;
}
```
After applying the css, Please clear your browser cache and check.

Best regards,
Mike
June 21, 2020 at 10:49 am #1224394

eee_lala
Participant

Thank you for the answer and sorry for not trying it out first, but wouldn’t your code just move the existing button to the lower end instead of creating a second one? In this case I am working on a one pager with several popups. Your code would apply the cusomization in general, which is not preferred.

So, could there a second button purposely placed on the popup bottom?
Or some workaround, which is visually appealing?

June 21, 2020 at 7:57 pm #1224434
Mike
Moderator
Hi,
To add a second close button to the mfp popup, try adding this code to the end of your functions.php file in Appearance > Editor:
```
function custom_script(){
  ?>
  <script>
(function($) {
  $(window).click(function(){
  $( ".mfp-figure button" ).clone().css({'margin-top': '30px'}).appendTo( ".mfp-bottom-bar .mfp-counter" );
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');
```
Unfortunately, this will work site-wide because the mfp container is at the very top of the page after the body tag and doesn’t include any attributes of the element being opened, so while you can define the page it will work on, you can’t define the element it will work on. So for your one-page site with many mfp popups, this might not be what you are looking for.
Perhaps your application of the mfp as an overlay is adding attributes or classes to the container and the above script could be modified to work only for those.
Are you using a custom script or adding the mfp-hide class to the elements?
Please link to your page so we can see what you have so far and how to target only the element you wish in the popup.

Best regards,
Mike
June 27, 2020 at 1:21 pm #1226047

eee_lala
Participant

Hey Mike,

thanks for the revision!
Though your code looks great I had to pass on the whole project for which it was needed.
Anyway I’ll keep the ressource, plus it also might help others.

I would have worked it out using classes, yes. But not this time :)

You guys rock.
Erik

June 27, 2020 at 2:40 pm #1226050

Mike
Moderator

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

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

The topic ‘MFP: second close button / function’ is closed to new replies.