At the moment, the basic Modal element in Oxygen does not have an option to disable page scrolling when a pop-up window opens. But many users ask for this feature. In addition, when placing in a modal content exceeding the height of the user's screen, the modal cannot be scrolled.
It is not known when this will be fixed, but for now I suggest using my script (see an example).
For use, you will need to copy this code and paste it into the javascript section of each Modal. There are no options for changes, so for optimization purposes you can use a minified version of the script.
/*jQuery Watch Plugin @author Darcy Clarke @version 2.0 Copyright (c) 2012 Darcy Clarke Dual licensed under the MIT and GPL licenses.*/ (function(e){e.fn.watch=function(t,n,r){var i=document.createElement("div");var s=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;var o=window.CustomEvent||function(){return arguments||{}};var u=function(e,t){e="on"+e;var n=e in t;if(!n){t.setAttribute(e,"return;");n=typeof t[e]=="function"}return n};if(typeof n=="function"){r=n;n={}}if(typeof r!="function")r=function(){};n=e.extend({},{throttle:10},n);var a=function(t){var n=this;e.each(this.watching,function(){var e=this;var r=false;var i;for(var s=0;s<e.props.length;s++){i=t[0].attributes[e.props[s]]||t.css(e.props[s]);if(e.vals[s]!=i){e.vals[s]=i;r=true;break}}if(r&&e.callback)e.callback.call(n,new o("AttrChange"))})};return this.each(function(){var o=this;var f=e(this);var l={props:t.split(" "),vals:[],changed:[],callback:r};e.each(l.props,function(e){l.vals[e]=f[0].attributes[l.props[e]]||f.css(l.props[e]);l.changed[e]=false});if(!this.watching)this.watching=[];this.watching.push(l);if(s){var c=new s(function(e){e.forEach(function(e){r.call(o,e)})});c.observe(this,{subtree:false,attributes:true})}else if(u("DOMAttrModified",i)){f.on("DOMAttrModified",r)}else if(u("propertychange",i)){f.on("propertychange",r)}else{setInterval(function(){a.call(o,f)},n.throttle)}})}})(jQuery); jQuery(document).ready(function($) { $('.oxygen-builder-body .oxy-modal-backdrop').css('height','auto'); if($('html').attr('ng-app') == 'CTFrontendBuilder') return; function scrollbarWidth(){var block = $('<div>').css({'height':'50px','width':'50px'}),indicator = $('<div>').css({'height':'200px'});$('body').append(block.append(indicator));var w1 = $('div',block).innerWidth();block.css('overflow-y','scroll');var w2 = $('div', block).innerWidth();$(block).remove();return (w1 - w2);} var bg = $('#%%ELEMENT_ID%%').parent('.oxy-modal-backdrop'), backsize = $(bg).height(); function fixflex () { var backpos = $(bg).css('align-items'), screenh = $(window).height(), barh = $('#wpadminbar').height(); $(bg).css({'height':'calc(100% - '+barh+'px)','top':+barh+'px'}); if(backsize > screenh) { if($(bg).hasClass('right')) { $(bg).css('align-items','flex-end'); $(bg).css('justify-content','flex-start'); } else if($(bg).hasClass('left')) { $(bg).css('justify-content','flex-start'); } else { $(bg).css('align-items','flex-start'); } } else { if($(bg).hasClass('right')) { $(bg).css('justify-content','center'); } else if($(bg).hasClass('left')) { $(bg).css('justify-content','center'); } else { $(bg).css('align-items',backpos); } } } $(window).resize(function(event) { fixflex(); }); fixflex(); if(typeof $().watch == 'function') { $(bg).watch('display', function() { if($(this).css('display')=='flex') { $('body').css({'overflow-y':'hidden', 'height':'100%', 'position':'relative', 'margin-right':scrollbarWidth()+'px'}); $(this).css('overflow-y','auto'); $('.oxy-sticky-header-active').css('padding-right',scrollbarWidth()+'px'); if($('#%%ELEMENT_ID%%[data-aos*="left"]')) { $(bg).css('overflow-x','hidden'); } } else if($(this).css('display')=='none') { $('.oxy-modal-backdrop').removeClass("live"); setTimeout(function() { $('body').css({'overflow-y':'auto','margin-right':'0'}); $('.oxy-sticky-header-active').css('padding-right','0'); }, 300); } }); } });
UPDATED 23.08.2020: fixed offset issue for sticky header.