Disabling page scrolling when opening the Modal in Oxygen

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).

Key Features:

• Disabling page scrolling when opening a modal;
• fixing the problem when the height of the modal exceeds the height of the screen (vertical overflow);
• the ability to place the modal in any position of the screen excluding a bug with overflow;
• fixed a twitching when deleting a scrollbar by adding margin on the right;
• when positioning the modal, the height of the admin bar for an authorized user was taken into account;
• minor refinement for the correct display of modals in the editor;
• elimination of horizontal overflow when using animation effects when appearing on the right.

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.