1

En dos secciones de mi web aparecen portadas de discos en miniatura, de manera que he creado un modal para que al hacer clic sobre ellas la imagen se despliegue en un tamaño más apropiado para apreciar detalles:

introducir la descripción de la imagen aquí

Al hacer clic en cualquiera de los dos tipos de miniaturas, el modal se despliega, y al hacerlo el contenido de la web se comprime ligeramente, las dos mitades (col de Bootstrap) se acercan un poco entre sí de forma brusca, y se vuelven a separar cuando se cierra el modal. Quiero evitar que ocurra.

El código para la miniatura más pequeña es el siguiente (el de la miniatura más grande es idéntico pero cambiando la resolución de 50 a 150):

<div class="contenedor-portada mr-2" data-toggle="modal" data-target="#modal-imagen"> <!-- Portada -->
    <?php echo '<img class="portada" src="imagenes/'.$decada.'/'.$ano.'/'.$nombre_foto.'.jpg" width="50" height="50">'; ?>
</div>

<div id="modal-imagen" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img id="modal-imagen-in" style="width: 100%">
            </div>
        </div>
    </div>
</div>

Y está controlado por el siguiente script de jQuery:

$(function () 
{
    $('.portada').click(function()
    {
        let ruta = $(this).attr('src');
        console.log(ruta);
        $('#modal-imagen-in').attr('src', ruta);
    });
});

No sé si la información proporcionada será suficiente, pero es que como me ponga a pegar código no acabo... Si necesitáis conocer más a fondo la estructura de la web, comentádmelo, sin problemas.

Un saludo y gracias de antemano.

7
  • 2
    Si puedes montar un snipped en el que se vea el problema será más sencillo el ayudarte. Los problemas con CSS son difíciles de tratar a no ser que se cuente con un ejemplo mínimo y verificable.
    – phpMyGuel
    el 6 ago. 2019 a las 8:25
  • Le echo un ojo a ver de qué va el asunto. el 6 ago. 2019 a las 13:49
  • He probado con CodePen pero no parece soportar archivos PHP, ¿qué alternativa sería mejor? el 20 ago. 2019 a las 9:54
  • Por cierto, este efecto que comento me ocurre con los modales de SweetAlert2 pero no con los de SweetAlert, me acabo de dar cuenta al intentar actualizar la librería. el 5 sep. 2019 a las 13:37
  • 1
    No estoy seguro sin ver el ejemplo práctico, pero esto mayormente sucede porque los plugins de modales suelen agregar al body la regla overflow: hidden, para evitar que la página scrollee mientras el modal se encuentra abierto. Esta regla hace que se esconda la barra de scroll y por ende el viewport pasa a ser unos pixeles más ancho. Intenta sobreescibir esta regla a ver si es el caso.
    – Periplo
    el 29 oct. 2019 a las 12:57

1 respuesta 1

0

He encontrado una solución en un hilo de GitHub que trata este problema precisamente:

Body width increases when modal is opened

https://github.com/jschr/bootstrap-modal/issues/64

Hay un montón de respuestas con posibles soluciones, pero la que me ha funcionado a mí es ésta:

https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Simplemente hay que añadir a tu hoja de estilos el siguiente código:

body {
  padding-right: 0px !important
}

.modal-open {
  overflow-y: auto;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.