css - close - modal fullscreen bootstrap 4

Cómo hacer Twitter bootstrap modal a pantalla completa

Question

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

¿Cómo puedo hacer que una ventana emergente modal de arranque de Twitter aparezca en pantalla completa para el código anterior, intenté jugar con css pero no pude conseguirlo como quería. ¿Puede alguien ayudarme con eso?

Answer 1

Debe configurar sus etiquetas DIV como se muestra a continuación.

Encuentra más detalles> http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>

Answer 2

El snippet de @Chris J tenía algunos problemas con los márgenes y el desbordamiento. Los cambios propuestos por @YanickRochon y @Joana, basados ​​en el fiddel de @Chris J se pueden encontrar en el siguiente jsfiddle .

Ese es el código CSS que funcionó para mí:

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}

Answer 3

En base a respuestas anteriores a este tema (@Chris J, @kkarli), se me ocurrió una solución "receptiva" para modales de pantalla completa:

Modales de pantalla completa que solo se pueden habilitar en ciertos puntos de interrupción . De esta forma, el modo mostrará "normal" en pantallas más amplias (de escritorio) y pantalla completa en pantallas más pequeñas (tabletas o dispositivos móviles) , dándole la sensación de una aplicación nativa.

.modal las siguientes clases que deben agregarse al elemento .modal :

• .modal-fullscreen-md-down : el modal es pantalla completa para pantallas de menos de 1200px .
• .modal-fullscreen-sm-down : el modal es pantalla completa para pantallas de menos de 922px .
• .modal-fullscreen-xs-down : el modal es pantalla completa para pantallas de menos de 768px .

Eche un vistazo al siguiente código:

/* Extra small devices (less than 768px) */
@media (max-width: 767px) {
  .modal-fullscreen-xs-down {
    padding: 0 !important;
  }
  .modal-fullscreen-xs-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-xs-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
  } 
}

/* Small devices (less than 992px) */
@media (max-width: 991px) {
  .modal-fullscreen-sm-down {
    padding: 0 !important;
  }
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
  }
}

/* Medium devices (less than 1200px) */
@media (max-width: 1199px) {
  .modal-fullscreen-md-down {
    padding: 0 !important;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
  }
}

La demostración está disponible en Codepen: https://codepen.io/andreivictor/full/KXNdoO .

Quienes usan Sass como preprocesador pueden aprovechar la siguiente combinación:

@mixin modal-fullscreen() {
  padding: 0 !important;

  .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
  }

}

Answer 4

La siguiente clase realizará un modal de pantalla completa en Bootstrap:

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

No estoy seguro de cómo se estructura el contenido interno de su modal, esto puede tener un efecto en la altura general dependiendo de la CSS que esté asociada con ella.

Answer 5

La solución elegida no conserva el estilo de esquina redonda. Para conservar las esquinas redondeadas, debe reducir un poco el ancho y la altura y eliminar el radio del borde 0. Además, no muestra la barra de desplazamiento vertical ...

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

Answer 6

Logré esto en Bootstrap 3 con el siguiente código:

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

En general, cuando tenga preguntas sobre problemas de espaciado / relleno, intente con el botón derecho + clic (o cmd + clic en mac) en el elemento y seleccione "inspeccionar elemento" en Chrome o "inspeccionar elemento con Firebug" en Firefox. Intente seleccionar diferentes elementos HTML en el panel de "elementos" y edite el CSS a la derecha en tiempo real hasta que obtenga el relleno / espaciado que desea.

Aquí hay una demostración en vivo

Aquí hay un enlace al violín

Answer 7

Para bootstrap 4, tengo que agregar la consulta de medios con max-width: none

@media (min-width: 576px) {
  .modal-dialog { max-width: none; }
}

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}