0
197
Vistas¿Cómo hago que todo el modal de hormigueo que contiene una imagen sea visible al cargar?
Al cargar y si el ancho del navegador es superior a 540 px, el modal que contiene una imagen se corta (consulte la figura a continuación) . ¿Qué debo hacer para que aparezca inmediatamente la barra de desplazamiento vertical?
Este proyecto existente en el que estoy trabajando usa el complemento modal tingle . Está vinculado así:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="tingle.min.css"> <style> html, body { height: 100%; } img { height: auto; width: 100%; } </style> <title>Tingle Modal</title> </head> <body> <script src="tingle.min.js"></script> <script src="modal.js"></script> </body> </html> modal.js es donde creo el modal que contiene la imagen:
function createModal(content) { let $modal = new tingle.modal({ footer: false, stickyFooter: false, closeMethods: ["overlay", "button", "escape"], closeLabel: "Close", cssClass: ["modal"], beforeClose: function() { return true; // close the modal }, onClose: function() { $modal.destroy(); } }); $modal.setContent(content); $modal.open(); } createModal("<div id='modal'><img id='sample' src='sample.jpg' /></div>"); console.log(document.getElementById("sample").offsetHeight);Noté que cuando acercas o alejas el zoom, o cambias el tamaño del navegador, obtengo el comportamiento esperado de tener la barra de desplazamiento. También noté que al cargar, la altura de la imagen es 0. No puedo establecer la altura de la imagen en un valor de píxel porque tendré varios modales que contienen diferentes imágenes que varían en tamaño.
También puede ver el comportamiento aquí: CodeSandbox . Primero haga que el ancho del navegador incrustado en CodeSandbox sea más grande, luego actualice para ver a qué me refiero.
He probado lo siguiente. Pero luego agrega la barra de desplazamiento incluso cuando todo el modal cabe en 100vh, lo cual no es deseable.
.tingle-modal { overflow-y: scroll; }2 Respuestas
Responde la pregunta0
Intenta agregar estos estilos
.tingle-modal { overflow-y: auto; }Si necesita guardar la posición del botón de cierre, agregue:
.tingle-modal__close { position: sticky; align-self: end; }y en lugar de
createModal("<div id='modal'><img src='sample.jpg' /></div>");úsalo
const img = new Image(); img.onload = () => { createModal("<div id='modal'><img src='sample.jpg' /></div>"); }; img.src = "sample.jpg";0
Miré el código en tingle.min.js . Comprueba si la altura del modal se desborda, si es así, agrega una clase tingle-modal--overflow . Sin embargo, la imagen aún no está cargada cuando verificó la altura. Así que tuve que rehacer la verificación después de llamar a la función createModal así:
document.getElementsByTagName("img")[0].onload = function() { const $modal = document.getElementsByClassName("tingle-modal")[0]; if (window.innerHeight <= $modal.clientHeight) $modal.classList.add("tingle-modal--overflow"); };Aquí hay una versión jQuery de la solución:
$(".tingle-modal-box img").on("load", function() { const $modal = $(".tingle-modal"); if (window.innerHeight <= $modal.height()) $modal.addClass("tingle-modal--overflow"); });