1

Soy algo nuevo usando bootstrap, la configuración por defecto hace que tenga un fondo blanco con un banear superior con título.

¿Que quiero hacer? Necesito que al dar click a un botón de “Más información” salga un pop up transparente que tenga una X en la esquina superior derecha para cerrar el popup, lo que contendrá el popup es una imagen, estoy usando bootstrap para asegurarme que se vea correcto en cualquier dispositivo.

Actualmente el popup muestra la imagen pero tiene todo un fondo blanco del modal que me roba mucho espacio y todo ese espacio no lo necesito solo ocupo que abra la imagen y que detrás quede la página de fondo con cierta transparencia.

1
  • Buen día, bienvenido(a) a Stack Overflow en español, este no es un sitio para solicitar que alguien realice un proyecto o tarea, te recomiendo leer las secciones Cómo preguntar y recorrido de bienvenida para que te familiarices con las normas del sitio. Por favor oprime editar y agrega el código que has utilizado hasta ahora y los errores que te impiden lograr lo que deseas hacer. Commented el 26 ene. 2023 a las 6:40

1 respuesta 1

0

Siempre puedes sobreescribir propiedades del css. Por ejemplo puedes crear una clase CustomModal y hacer lo siguiente:

img{
 width:200px;
 height:400px;
 background-color:blue;
}

.CustomModal .modal-dialog{
   max-width: fit-content !important;
   pointer-events: auto;
   background-color:transparent;
}

.CustomModal .btn-close{
    position: absolute;
    top: -10px;
    right: -13px;
    border-radius: 50%;
    background-color: white;
    padding: 5px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MiModal">
    Abrir
</button>

<div class="modal fade CustomModal" id="MiModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    <img >
  </div>
</div>

La ventana modal de bootstrap se compone de varias partes:

  • modal-dialog
    • modal-content
      • modal-header
      • modal-body
      • modal-footer

Los cuales son div que van dando formato de ventana, principalmente agregando margin y padding, como no nos interesa eso, solo vamos a ocupamos modal-dialog, donde le cambiamos el width para que se ajuste a la imagen, le seteamos el pointer-event en auto ya que bootstrap lo cambia (sin esto el botón cerrar no funciona)

Además dentro agregamos un botón para cerrar, y su respectivo css con position:absolute para sacarlo fuera de la imagen como tu quieres.

4
  • Excelente solución, literalmente fuiste 100% al punto que necesitaba, ¡Excelente! Muchas gracias por contribuir a mi aprendizaje! Ojalá le sirva a alguien más.
    – Junkboy
    Commented el 26 ene. 2023 a las 21:09
  • Por cierto, conoces como editar el carousel? El que tiene bootstrap tiene incluidas las flechas dentro de la imagen pero no soy muy fan ya que se pierde con la imagen, quisiera tener las flechas fuera del recuadro de la imagen, estuve jugando con CSS pero solo logro mover las flechas dentro del recuadro que incluye las imagenes.
    – Junkboy
    Commented el 26 ene. 2023 a las 21:24
  • @Junkboy Me alegro haber podido ayudarte. Sobre tu otra pregunta, creo que se puede hacer, pero debes generar una nueva pregunta, te recomiendo colocar código de lo has intentado, ya que es común cerrar o votar negativamente a preguntas que no lo incluyen (en esta te salvaste por el horario).
    – Yussef
    Commented el 26 ene. 2023 a las 21:33
  • Muchas Gracias @Yussef por tus comentarios, soy nuevo en stackoverflow, así que todo ayuda, ya he creado una nueva pregunta esta vez incluyendo codigo e imagenes para facilitarlo. Por si tienes tiempo y gustas darte una vuelta. es.stackoverflow.com/questions/580311/…
    – Junkboy
    Commented el 26 ene. 2023 a las 22:44

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