Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1009023

    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">
    	  midClick: true
    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]

    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.


    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>


    <a href="#popup1" class="open-popup-link no-scroll">Click this button to open form in lightbox-FORM1</a>

    Best regards,


    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");

    you can see here normal Enfold Behavior: – klick on the darkend image in the center and then scroll

    you can see here behavior with that code:


    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?


    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.



    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,


    Hi Rikard,

    Great. Thanks.

    You can close this topic :)



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

    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Lightbox – Stop from scrolling up upon opening’ is closed to new replies.