How to Automatically Close Oxygen Builder Modal on Scroll

Published: January 7, 2021,  
Posted in: ,  

Working on some improvements to a clients site recently, they asked if the homepage modal could be closed automatically on scroll. I did have it set to close on background click but this made more sense in this scenario.

I posted my question on the WPDevDesign and Oxygen Official User Group Facebook page and the following solution was shared:

In a code block outside of your modal, add the following to the JavaScript area, replacing 'myModal' to the id of your modal.

You can also adjust the distance to scroll from the value of ‘200’ in the code below.

jQuery( document ).ready( function() {
  // check if the function is defined
  // (we may be on a page without modals)
  if( typeof oxyCloseModal !== 'undefined' ) {
    jQuery(window).scroll(function(){
      var scroll = jQuery(window).scrollTop();
      if ( scroll > 200 ) {
     // close a specific modal, if found
       //oxyCloseModal();
        oxyCloseModal( document.getElementById('myModal') );
        jQuery( ".oxy-modal-backdrop" ).removeClass( "live" );
      }
 });
  }
} );

I tested this out in Chrome, Safari, Brave and Firefox on desktop and Chrome and Safari on mobile.

Hope you find it useful.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Notified Of New Posts
Copyright © 2021 All Rights Reserved  |  By Itchy Fingers Design
twitterfacebookenvelopelinkedinxinglong-arrow-leftlong-arrow-rightpaper-planepinterest-pwhatsappchevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram