Centra perfectamente la caja de luz de forma dinámica sin importar el tamaño de la pantalla

Question

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.

javascript html css

1

Blackard 30 ago. 2019 a las 19:11

Answer 1

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%);
}

2

TemporaryName 30 ago. 2019 a las 16:28

Answer 2

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>

1

hungerstar 30 ago. 2019 a las 16:26

Answer 3

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>

0

StefanBob 30 ago. 2019 a las 17:26

Centra perfectamente la caja de luz de forma dinámica sin importar el tamaño de la pantalla

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript