Con position: fixed
le das una posición fija a un elemento relativo al viewport, por ende, si haces scroll éste se mantendrá en la misma posición. Otra opción es hacerlo absolute
y mediante JavaScript obtener el scrollTop
y el scrollLeft
del elemento para así centrarlo y ejecutar éstos cálculos en el evento scroll
de window.
Usando position: fixed
Hay un problema con usar éste método: si el alto del elemento supera al viewheight, la parte que se desborda no será visible. Ejecuta el siguiente ejemplo para reproducir el problema:
let modal = document.querySelector('.modal');
let width = modal.offsetWidth;
let vw = window.innerWidth;
/* centra la ventana modal horizontalmente */
modal.style.marginLeft = `${(vw - width) / 2}px`;
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: url('http://www.awwwards.com/awards/images/2013/10/Free_People.jpg') repeat-y;
background-size: contain;
height: 500vh;
}
.modal {
background-color: #fff;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0 2px 8px 2px rgba(0,0,0,.15);
display: flex;
flex-direction: column;
height: 800px;
max-width: 400px;
position: fixed;
top: 20px;
width: 80%;
z-index: 5;
}
.modal .head {
align-items: center;
border-bottom: 1px solid #eee;
display: flex;
flex: 0 0 50px;
justify-content: space-between;
padding: 0 1rem;
}
.modal .head .title {
display: inline-block;
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-weight: 400;
}
.modal .head .close {
cursor: pointer;
font-family: 'segoe ui';
}
.modal .body {
flex: 1;
padding: 1rem;
overflow: auto;
}
.modal .body h2 {
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-weight: 400;
}
.modal .body p {
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-size: 15px;
margin-top: 25px;
}
.modal .foot {
align-items: center;
border-top: 1px solid #eee;
display: flex;
flex: 0 0 50px;
justify-content: flex-end;
padding: 0 1rem;
}
.modal .foot .btn { margin-left: 10px; }
.btn {
border-radius: 3px;
padding: .5rem .75rem;
}
.btn.default {
background-color: #fff;
border: 1px solid #ccc;
color: #444;
}
.btn.primary {
background-color: #2980b9;
border: 1px solid transparent;
color: #fff;
}
<body>
<div class="modal">
<header class="head">
<h3 class="title">Oferta</h3>
<span class="close">×</span>
</header>
<article class="body">
<h2>¡Aproveche nuestras ofertas!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam porro, hic facilis pariatur maxime praesentium doloribus, esse iste enim distinctio ipsa nobis reiciendis aut similique, eligendi illum, quibusdam nam repellat.
</p>
</article>
<footer class="foot">
<button class="btn default">Cerrar</button>
<button class="btn primary">Aceptar</button>
</footer>
</div>
</body>
Usando position: fixed
y max-height
El anterior problema lo puedes solucionar dando un max-height
al modal para que no supere el viewport en ningún momento. Además, en caso quieras poner un margen, se resta el margen superior e inferior al viewport. Ésto puedes hacerlo vía calc
o, en caso quieras dar soporte a navegadores viejos, puedes hacerlo mediante JavaScript. Ejecuta el suguiente ejemplo para ver su funcionamiento.
document.addEventListener('DOMContentLoaded', function () {
let modal = document.querySelector('.modal');
let width = modal.offsetWidth;
let vw = window.innerWidth;
/* centra la ventana modal horizontalmente */
modal.style.marginLeft = `${(vw - width) / 2}px`;
});
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: url('http://www.awwwards.com/awards/images/2013/10/Free_People.jpg') repeat-y;
background-size: contain;
height: 500vh;
}
.modal {
background-color: #fff;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0 2px 8px 2px rgba(0,0,0,.15);
display: flex;
flex-direction: column;
height: 800px;
max-height: calc(100vh - 40px);
max-width: 400px;
position: fixed;
top: 20px;
width: 80%;
z-index: 5;
}
.modal .head {
align-items: center;
border-bottom: 1px solid #eee;
display: flex;
flex: 0 0 50px;
justify-content: space-between;
padding: 0 1rem;
}
.modal .head .title {
display: inline-block;
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-weight: 400;
}
.modal .head .close {
cursor: pointer;
font-family: 'segoe ui';
}
.modal .body {
flex: 1;
padding: 1rem;
overflow: auto;
}
.modal .body h2 {
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-weight: 400;
}
.modal .body p {
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-size: 15px;
margin-top: 25px;
}
.modal .foot {
align-items: center;
border-top: 1px solid #eee;
display: flex;
flex: 0 0 50px;
justify-content: flex-end;
padding: 0 1rem;
}
.modal .foot .btn { margin-left: 10px; }
.btn {
border-radius: 3px;
padding: .5rem .75rem;
}
.btn.default {
background-color: #fff;
border: 1px solid #ccc;
color: #444;
}
.btn.primary {
background-color: #2980b9;
border: 1px solid transparent;
color: #fff;
}
<body>
<div class="modal">
<header class="head">
<h3 class="title">Oferta</h3>
<span class="close">×</span>
</header>
<article class="body">
<h2>¡Aproveche nuestras ofertas!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam porro, hic facilis pariatur maxime praesentium doloribus, esse iste enim distinctio ipsa nobis reiciendis aut similique, eligendi illum, quibusdam nam repellat.
</p>
</article>
<footer class="foot">
<button class="btn default">Cerrar</button>
<button class="btn primary">Aceptar</button>
</footer>
</div>
</body>
Usando position: fixed
y max-height
vía JS
La regla calc
tiene una aceptación bastante buena ahora mismo así que se puede usar sin ningún remordimiento. Sin embargo, si tu público final puede tener navegadores muy viejos como IE < 9, entonces es probable que quieras hacerlo compatible. Paa ésto puedes establecer el alto máximo de la modal de acuerdo al viewheight incluso cuando se redimensione la ventana.
document.addEventListener('DOMContentLoaded', function () {
adjustModal();
window.addEventListener('resize', adjustModal);
});
function adjustModal () {
let modal = document.querySelector('.modal');
let width = modal.offsetWidth;
let vw = window.innerWidth;
let vh = window.innerHeight;
/* centra la ventana modal horizontalmente */
modal.style.marginLeft = `${(vw - width) / 2}px`;
/* Le da un alto máximo al modal */
modal.style.maxHeight = `${vh - 40}px`;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: url('http://www.awwwards.com/awards/images/2013/10/Free_People.jpg') repeat-y;
background-size: contain;
height: 500vh;
}
.modal {
background-color: #fff;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0 2px 8px 2px rgba(0,0,0,.15);
display: flex;
flex-direction: column;
height: 800px;
max-width: 400px;
position: fixed;
top: 20px;
width: 80%;
z-index: 5;
}
.modal .head {
align-items: center;
border-bottom: 1px solid #eee;
display: flex;
flex: 0 0 50px;
justify-content: space-between;
padding: 0 1rem;
}
.modal .head .title {
display: inline-block;
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-weight: 400;
}
.modal .head .close {
cursor: pointer;
font-family: 'segoe ui';
}
.modal .body {
flex: 1;
padding: 1rem;
overflow: auto;
}
.modal .body h2 {
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-weight: 400;
}
.modal .body p {
font-family: 'segoe ui', 'ubuntu', 'noto sans', system;
font-size: 15px;
margin-top: 25px;
}
.modal .foot {
align-items: center;
border-top: 1px solid #eee;
display: flex;
flex: 0 0 50px;
justify-content: flex-end;
padding: 0 1rem;
}
.modal .foot .btn { margin-left: 10px; }
.btn {
border-radius: 3px;
padding: .5rem .75rem;
}
.btn.default {
background-color: #fff;
border: 1px solid #ccc;
color: #444;
}
.btn.primary {
background-color: #2980b9;
border: 1px solid transparent;
color: #fff;
}
<body>
<div class="modal">
<header class="head">
<h3 class="title">Oferta</h3>
<span class="close">×</span>
</header>
<article class="body">
<h2>¡Aproveche nuestras ofertas!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam porro, hic facilis pariatur maxime praesentium doloribus, esse iste enim distinctio ipsa nobis reiciendis aut similique, eligendi illum, quibusdam nam repellat.
</p>
</article>
<footer class="foot">
<button class="btn default">Cerrar</button>
<button class="btn primary">Aceptar</button>
</footer>
</div>
</body>
Puedes verlo en funcionamiento más cómodamente en éste Fiddle.
position: fixed
le das una posición fija a un elemento relativo al viewport, por ende, si haces scroll éste se mantendrá en la misma posición. Otra opción es hacerloabsolute
y mediante JavaScript obtener elscrollTop
y elscrollLeft
del elemento para así centrarlo y ejecutar éstos cálculos en el eventoscroll
. – gugadev el 1 feb. 17 a las 19:37