Buongiorno.
Questa è una questione probabilmente risaputa, e che forse necessita di JS per la soluzione. Mi piacrebbe realizzarlo solo con i CSS, ma non so se sia possibile.
In ogni modo, questo è il problema.
Sto creando una popup window utilizzando un DIV a tutta pagina per offuscare lo sfondo su cui appare una finestra realizzata con un altro DIV la cui posizione è stabilia tramite POSITION: ABSOLUTE. Inserisco subito HTML e CSS:
<div id="cWindow">
<div class="pageCover active"></div>
<div class="modalWindow active">
[...]
</div>
</div>
</div>
.pageCover {
position:fixed;
/* z-index:10; */
background-color:rgba(246, 249, 245, 0.94);
width:100vw;
height:100vh;
top:0;
left: 0;
visibility: hidden;
opacity: 0;
z-index: 200;
transition: all 0.2s ease-in-out;
}
.pageCover.active, .modalWindow.active {
visibility: visible;
opacity: 1;
}
.modalWindow.active {
margin-top: 0;
}
.modalWindow {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top:70%;
/* height: 300px; */
width: 400px;
background-color: #fff;
box-shadow: 1px 1px 5px 1px #ccc;
padding: 15px;
border: 2px solid #ddd;
border-radius: 6px;
text-align: center;
visibility: hidden;
opacity: 0;
transition: all .7s ease-out;
z-index: 200;
}
La pagina si attiva dopo la pressione di un pulsante, che tramite JS aggiunge la classe active al DIV pageCover, e rende visibile in primo piano il DIV modalWindow .
Il posizionamento orizzontale del DIV modalWindow è corretto, centrato nella pagina, come voluto. Il problema è quello verticale, perché i tasti d'attivazione possono variare sensibilmente in base alle pagine, e la popup dovrebbe apparire centrata (orizzonatlmente e verticalmente) nella finestra in vista, nel punto in cui premo il tasto, perché le informazioni relative siano disponibili all'utente.
É chiaro che il margin-top:70% che applico può andar bene solo per una pagina specifica, ma per le altre spesso si apre fuori dal punto in cui ci si trova dopo uno scroll nello schermo.
Qualcuno ha un suggerimento da darmi? Forse con un POSITION: FIXED?
Grazie.