Tengo un div que contiene todo mi contenido y luego tengo un div que contiene ventanas emergentes. Así que básicamente algo como esto:
<div class="content"> Some content </div> <div class="popup-wrapper"> Popup content </div> Luego, en algún momento, se agrega una clase al popup-wrapper debido al clic de un botón, que en Angular se vería así:
<button (click)="popup = !popup">Click me</button> <div class="popup-wrapper" [ngClass]="popup ? 'is-active' : ''"> Popup content </div> Mi pregunta es: ¿Hay alguna manera (CSS sabio. JS probablemente también lo haría si no hay otra alternativa disponible) que cuando popup-wrapper tiene la clase is-active , también puedo orientar el content ?
El problema para mí no es solo poner el mismo JS en el div de content , es decir, [ngClass]="popup ? 'is-active' : ''" se debe a que hay varias instancias que pueden activar una ventana emergente y otros contenedores de ventanas emergentes también . Entonces, si tuviera que hacer esto, tendría que revisar cada página que tenga este tipo de popup-wrapper y pegar un código similar en cada div de content , pero con diferentes nombres de estado.
Así que pensé que sería mucho más fácil si pudiera apuntar al div de content cada vez que el div popup-wrapper tuviera la clase is-active .
Para mi entendimiento, necesitarás algo así:
function anyName () { let x = document.getElementByClassName('is-active'); if (x === true) { // do something } }Dependiendo de lo que quiera hacer a continuación, puede optar por un identificador como el nombre de clase de su div ('contenido') o intentar orientarlo por su posición, como 'anteriorElementSibling'