Lightbox - Stop from scrolling up upon opening - Support | Kriesi.at

Tagged: CSS, form, js, Lightbox, pop-up, scroll

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

Author

Posts
September 12, 2018 at 5:30 pm #1009023
cordellbrewer
Participant
Hi,
I have this bit of code that I found on your forum which opens up a lightbox containing a Gravity Form:
The JS:
```
function add_custom_script(){
?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true
	});
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');
```
The HTML:
```
<a href="#popup1" class="open-popup-link">Click this button to open form in lightbox-FORM1</a>

<div id="popup1" class="white-popup mfp-hide">
[gravityform id=1 title=false description=false ajax=true]
</div>
```
The CSS:
```
.white-popup {
    position: relative;
    background: #fff;
    padding: 20px;
    width: auto;
    max-width: 50vw;
    margin: 20px auto;
}
```
It works perfectly except for the fact that as the lightbox is opened, the whole page scrolls up a bit. I think this is due to the sticky header. When I turn off the sticky header, then it doesn’t scroll up at all.

If you look half way down the page you will see an image with caption “FOR THE ARCHITECT”. Below that in grey text (Click this button to open form in lightbox-FORM1) is the link to open the lightobx.

I tried to sort it out using CSS but haven’t managed to fix it. Maybe it needs a small bit of JS; not sure. (I don’t know any JS unfortunately.)

Please could you kindly assist.

Thank you.
September 13, 2018 at 12:23 pm #1009352
Dude
Participant
Hey Cordell,

Please try to replace the html code for the popup link
```
<a href="#popup1" class="open-popup-link">Click this button to open form in lightbox-FORM1</a>
```
with
```
<a href="#popup1" class="open-popup-link no-scroll">Click this button to open form in lightbox-FORM1</a>
```
Best regards,
Peter
September 13, 2018 at 12:44 pm #1009361
Guenni007
Participant
or do you mean the background scroll when a lightbox is opend and you scroll ?

Try this instead in your functions.php of your child theme:
```
add_action('wp_footer', 'custom_lightbox_script');
function custom_lightbox_script(){
?>
<script type="text/javascript">
(function($) {
    function a() {
      $('body').on('click', '.lightbox-added', function() {
        if($('.mfp-bg').length >= 1) {
          $('html').css("overflow-y", "hidden");
        } 
      });
      
      $('body').on('click', function() {
        setTimeout( function() {
          if($('.mfp-bg').length == 0) { 
            $('html').css("overflow-y", "scroll");
          }
        },500);   
      });
    }
  a(); 
})(jQuery);
</script>
<?php
}
```
you can see here normal Enfold Behavior: https://kriesi.at/themes/enfold-2017/elements/image/ – klick on the darkend image in the center and then scroll

you can see here behavior with that code: https://webers-testseite.de/lightbox-scroll-behavior/
September 14, 2018 at 11:14 am #1009863

cordellbrewer
Participant

Hey Dude,

Perfect! Exactly what I meant.

Thanks so much for your help :)

P.S. So that no-scroll would be a class built into Enfold? So I could use it on other elements?

September 14, 2018 at 11:16 am #1009864

cordellbrewer
Participant

Hey Guenni007,

No. Not what I meant.

Thanks anyway thought for your input. I will keep that in mind in future if that’s the effect I want to achieve :)

Much appreciated.

September 15, 2018 at 7:41 am #1010007

Rikard
Keymaster

Hi,

Yes, you should be able to add that class to other elements as well. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

September 17, 2018 at 9:25 am #1010628

cordellbrewer
Participant

Hi Rikard,

Great. Thanks.

You can close this topic :)

September 17, 2018 at 1:11 pm #1010715

Rikard
Keymaster

Hi,

Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts