Deshabilitar el scroll al abrir Popups en Oxygen

En este sencillo artículo veremos como inhabilitar el scroll de la página si lanzamos un popup. Esta acción nos puede ser útil, por ejemplo, cuando queremos centrar toda la atención del usuario o visitante de la página en un determinado mensaje el cual exponemos por medio de un popup. De esta manera, es como si toda la página quedase bloqueada hasta que se cierra el popup que hemos lanzado para ello. Esto nos es útil, por ejemplo, en el caso de que queremos obligar al usuario o visitante centrado en el mensaje que hay en el popup.

uptime
¿Qué vamos a lograr con esto?
Deshabilitar el desplazamiento de página al abrir un modal (Popup).
Solucionar el desbordamiento de pantalla cuando el popup excede la altura de la pantalla (desbordamiento vertical).
Colocar el modal en cualquier posición de la pantalla excluyendo un error con desbordamiento.
Corregir la contracción al eliminar la barra de desplazamiento agregando un margen a la derecha.
Eliminar el desbordamiento horizontal al usar efectos de animación cuando aparecen a la derecha.
contact info icon 1
¿Qué tenemos que hacer?
El código JS que tenemos abajo lo tendremos que pegar en cada popup o modal en el que queremos conseguir tal resultado.
Se puede usar la versión reducida o limpia del código para mejorar un poco la carga. (Click en el icono para ver).
Abajo tenemos la imagen que nos sirve de guía para una mayor claridad y, mas abajo el código que se debe copiar y pegar.
Código Limpio
codigo popups
/*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').css( { 'height' : '50px','width' : '50px'} ),indicator = $('
').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 $().watc h== '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); } }); } });
databasefile-emptyrocketthumbs-upcrosslayers