January 7, 2021

How to Automatically Close Oxygen Builder Modal on Scroll

A very useful solution for closing a modal on scroll in the Oxygen builder.

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.

I hope you find it useful.

Amanda Lucas

Amanda Lucas runs a web design agency in Ireland called Itchy Fingers Design. She enjoys creating websites that help support business goals and growth and sharing her knowledge.