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'); //Fix display of Modal in the editor
  
    if($('html').attr('ng-app') == 'CTFrontendBuilder') return; //This disables the script in the editor
  
    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');
                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'});
		}, 300);
	    }
        });
    }

});
Disabling page scrolling when opening the Modal in Oxygen Builder

Demo

It is recommended to check on different screen resolutions and different browsers, as well as on mobile devices.
With long content and scrolling
If you have questions or suggestions, then write a comment below
If, however, you need personal assistance, personal improvement of the script, or consultation, then contact me through the feedback form.
Follow the release of new tips and tutorials:
coffeecrossarrow-up