Estoy usando JQuery para cambiar la opacidad de la página después de cierto retraso. El problema es que mi ventana emergente también hereda esta opacidad.
¿Cómo puedo aplicarlo en toda la página sin mi div #popup-news ?
contenido.html:
<div id="popup-news"> [...] </div>estilo.css:
#popup-news { width: 45%; position: fixed; left: 50%; transform: translateX(-50%); padding-top: 10px; padding-bottom: 40px; display: none; background-color: white; border: 1px solid #d6d8dc; z-index: 99; }archivo js:
setTimeout(function(){ $('#popup-news').css('display', 'block'); }, 30000); if($('#popup-news').css('display') == 'none'){ $('body').css('opacity', '0.2'); }No es posible cambiar la opacidad del body sin afectar a uno de sus elementos secundarios.
Una solución al problema es poner todo lo demás en la página en un elemento que sea hermano de la ventana emergente y cambiar la opacidad de ese elemento en lugar del body :
<div id="main"> the rest of the body's content </div> <div id="popup-news"> [...] </div>JS:
… if($('#popup-news').css('display') == 'none'){ $('#main').css('opacity', '0.2'); }