Come progettare un CSS per una finestra di dialogo di conferma mobile centrata?
Domanda
Sto cercando un modo per visualizzare una finestra di dialogo di conferma sempre centrata sulla pagina e mobile sulla pagina.
Ho provato, ma non è 'sempre centrato', poiché la posizione è fissa:
.Popup
{
text-align:center;
position: absolute;
bottom: 10%;
left: 27%;
z-index:50;
width: 400px;
background-color: #FFF6BD;
border:2px solid black;
}
Qualche idea? Grazie
Soluzione
Prova a utilizzare questo CSSS
#centerpoint {
top: 50%;
left: 50%;
position: absolute;
}
#dialog {
position: relative;
width: 600px;
margin-left: -300px;
height: 400px;
margin-top: -200px;
}
<div id="centerpoint">
<div id="dialog"></div>
</div>
#centerpoint dovrebbe essere il div contenitore della finestra di dialogo
Nota che il #centerpoint DIV dovrebbe essere all'interno dell'elemento body o all'interno di elementi che non hanno un position: relative; proprietà
Altri suggerimenti
Rispetto alla risposta di @ Toma, puoi farlo su un elemento
#theDiv {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
height: 50px;
margin-top: -25px;
background: yellow;
}
<div id="theDiv" />
Ciò ti consente di posizionarlo in qualsiasi punto della pagina indipendentemente dai contenitori principali e dalle loro proprietà position
.
La trasformazione CSS3 può essere utilizzata per evitare larghezza e margini codificati:
.dialog {
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
Esempio di utilizzo: http://tympanus.net/ codrops / 2013/06/25 / nifty-modal-window-effetti /
.Popup
{
width:400px;
margin-left:auto;
margin-right:auto;
}
Questo è l'allineamento orizzontale; l'allineamento verticale è un po 'più complicato. Solo Google in giro per " css centro verticale " o qualcosa del genere.