es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El modal se vuelve gris después de migrar de Bootstrap 4 a 5.

16 Jul, 2023 Programación

Acabo de vincular mi código de Bootstrap 4.1 a Bootstrap 5 y mi modal dejó de funcionar. Quiero decir, cuando se abre el modal se vuelve gris y no puedo hacer clic en el botón ni salir de él. ¿Qué debo cambiar para que funcione en Bootstrap 5?

Este es mi código:

Modal:

<!-- Crea el modal de Bootstrap donde aparecerá la imagen -->
  <div class="modal fade" id="imagemodal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
          <h4 class="modal-title" id="myModalLabel">Vista previa</h4>
        </div>
        <div class="modal-body">
          <img src="" id="imagepreview" style="width: 400px; height: 264px;">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>

JS:

$("#pop").on("click", function() {
  $('#imagepreview').attr('src', $('#imageresource').attr('src')); // asigna la imagen al modal cuando el usuario hace clic en el enlace de agrandar
  $('#imagemodal').modal('show'); // imagemodal es el atributo id asignado al modal de Bootstrap, entonces uso la función show
});
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Con el cambio a Bootstrap 5, hay algunos cambios que deben realizarse en el código para que el modal funcione correctamente.

    En primer lugar, se debe eliminar el atributo data-backdrop del div que tiene la clase modal. Este atributo evitaba que el usuario pudiera hacer clic en cualquier lugar fuera del modal para cerrarlo.

    En segundo lugar, la clase fade debe cambiarse a modal-dialog-centered en el div que tiene la clase modal-dialog. La clase fade se utilizaba para agregar un efecto de desvanecimiento cuando se abría o cerraba el modal, pero se ha eliminado en Bootstrap 5.

    Aquí tienes el código actualizado:

    Modal:

    <!-- Crea el modal de Bootstrap donde aparecerá la imagen -->
  <div class="modal" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
          <h4 class="modal-title" id="myModalLabel">Podgląd</h4>
        </div>
        <div class="modal-body">
          <!-- <img src="" id="imagepreview" style="width: 400px; height: 264px;"> -->
          <img src="" id="imagepreview" style="width: 400px; height: 264px;">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>

    JS:

    $("#pop").on("click", function() {
  $('#imagepreview').attr('src', $('#imageresource').attr('src')); // aquí asigna la imagen al modal cuando el usuario hace clic en el enlace de agrandar
  $('#imagemodal').modal('show'); // imagemodal es el atributo id asignado al modal de bootstrap, luego uso la función show
});

Comments are closed.