1

Tengo 4 columnas con un ancho cada una de 248,5 px en la cual tiene contenido y al agregar un botón con el evento modal, éste sólo se muestra o abre dentro de ese recuedro y no logro que se muestre en el centro de la pantalla, lo mismo sucede en cada uno de esos cuadros.

<div class="owl-item" style="width: 248.5px;">
  <div class="item">
      <div class="panel panel-default">
                   <!-- Trigger the modal with a button -->
         <button type="button" class="btn btn-info btn-lg" data- 
         toggle="modal" data-target="#myModal">Open Modal</button>

       <!-- Modal -->
       <div id="myModal" class="modal fade" role="dialog">
           <div class="modal-dialog">

           <!-- Modal content-->
           <div class="modal-content">
           <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">&times; 
    </button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data- 
    dismiss="modal">Close</button>
   </div>
  </div>

</div>
</div>

      </div>
  </div>
</div>

Adjunto imagen de como sale el modal dentro de las columnas, que son 4 cada una mide 248,5 px de ancho y el modal se queda encapsulado dentro de esos recuadros no logro que salga en el medio. introducir la descripción de la imagen aquí

3
  • Podrías explicarnos un poco mejor lo que quieres lograr? Agregar alguna foto de lo que te pasa podría ayudar...
    – Patrick
    Commented el 21 mar. 2019 a las 3:48
  • Hola! ya agregué la foto Commented el 21 mar. 2019 a las 4:01
  • Yo considero que una modal no está diseñada para mostrarse en medio de dos cuadros, está diseñada para mostrarse tal como es; una modal. Puedes probar Panel Group de Bootstrap.
    – Edgard
    Commented el 21 mar. 2019 a las 18:22

1 respuesta 1

0

Intenta agregar esto a el div principal de tu ventana modal

    z-index: 99999999;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
3
  • no funciona pero, ahora se desplaza al medio de igual forma sigue saliendo por debajo Commented el 21 mar. 2019 a las 11:29
  • Ya lo solucioné, era tan simple que uno queda como un idiota. Al botón lo dejé dentro de cada recuadro y al código del modal lo puse más abajo en otro row y ahi funciona como corresponde. Commented el 21 mar. 2019 a las 12:29
  • Por favor, procura no abusar del valor en z-index, se considera una mala práctica Commented el 21 mar. 2019 a las 14:05

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.