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.