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
    el 21 mar. 2019 a las 3:48
  • Hola! ya agregué la foto 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
    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 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. el 21 mar. 2019 a las 12:29
  • Por favor, procura no abusar del valor en z-index, se considera una mala práctica el 21 mar. 2019 a las 14:05

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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