Tengo un div emergente que puede transmitir video o mostrar un documento / imagen dependiendo del archivo adjunto.
El problema que tengo es asegurarme de que esté centrado vertical y horizontalmente, tanto para navegadores de escritorio como para aplicaciones móviles.
He estado probando diferentes atributos, pero es como si cambiara de lo que ya tengo y de repente está fuera de la página.
if(extension === "mp4"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "jpg"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><img id="VideoLauncher" width="600" src="'+file+'" onclick="lightbox_close()"></img></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "pdf" || extension === "doc" || extension === "docx"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><iframe src="https://docs.google.com/gview?url='+file+'&embedded=true" style="height:800px; width:600px;" frameborder="0"></iframe></div><div id="fade" onClick="lightbox_close();"></div>'
}
var LightEle = document.querySelector("#light");
var FadeEle = document.querySelector("#fade");
var BoxCloseEle = document.querySelector("#boxclose");
LightEle.style.cssText = 'display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 100%px; margin-left: -200px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible;';
FadeEle.style.cssText = 'display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);';
Idealmente, lo que estoy buscando es el estilo que centre dinámicamente el elemento de luz, horizontal y verticalmente, aunque el elemento de luz tendrá un tamaño diferente dependiendo del archivo que se muestre. Debido a esto, no puedo simplemente codificar la altura y el ancho.
3 respuestas
Hay dos formas de hacer esto:
.lightbox {
margin: 0 auto;
}
Esto solo se centra horizontalmente dentro del componente padre. Es una manera muy simple si eso es lo que quieres hacer.
Si no, intente esto:
.lightbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Un enfoque popular para los elementos de centro vertical y horizontal es utilizar:
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
Puede usar esto con posicionamiento absoluto o fijo . top
y left
mueve la esquina superior izquierda hacia el centro de la pantalla, mientras que translate( -50%, -50% )
mueve el elemento hacia la izquierda y el 50% del ancho / alto de los elementos, colocando el centro de El elemento en el centro de la página.
.box {
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
/* For Demo */
width: 75vw;
height: 75vh;
background-color: #ccc;
}
<div class="box"></div>
Use Flexbox:
main {
background-color: teal;
}
.modal-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
}
.modal {
display: block;
max-width: 300px;
width: 90%;
max-height: 300px;
height: 90%;
background-color: white;
}
<main>
<div class="modal-container">
<div class="modal">
<h2>yes</h2>
</div>
</div>
</main>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.