Cómo crear un modal a pantalla completa responsive con Bootstrap

En este tutorial vamos a ver como crear un modal a pantalla completa (full-screen) con Twitter Bootstrap. Primero añadiremos el modal de bootstrap a nuestra página, luego utilizando media queries de CSS lo haremos responsive. Como resultado obtendremos un modal a pantalla completa responsive desarrollado con Bootstrap.

Resumimos los pasos:

1. Crea una plantilla básica de HTML
2. Añade el modal con Bootstrap
3. Conviértelo en un modal a pantalla completa con media queries de CSS

Crea una plantilla básica de HTML

Primero crea una carpeta llamada modal en el directorio raíz de tu servidor. Más tarde, crea un fichero llamado index.html en ella, y añádele algo de HTML básico, tampoco muy complejo puesto que esto es una prueba. También crea dos carpetas más dentro de modal, una llamada js, que es donde alojaremos los fichero javascript que vayamos necesitando, y otra llamada css para las hojas de estilo. Ahora descárgate jQuery y Bootstrap de sus sitios oficiales y añádelos a sus respectivas carpetas.

Este será nuestro HTML de ejemplo para nuestra plantilla.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>Modal jQuery Autocomplete</title>
		<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Noto+Serif:400,700">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		
	</head>
<body>

	<script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script src="js/script.js"></script>
</body>
</html>

Añade el modal con Bootstrap

Ahora copia el siguiente código HTML y pégalo en tu fichero index.html, dentro del tag body.

<!-- Button trigger modal -->
	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	  Launch demo modal
	</button>
	
	<!-- Modal -->
	<div class="modal fullscreen-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>

Convertir el modal a pantalla completa utilizando media queries de CSS

Ahora añadimos la clase fullscreen-modal a tu modal. Así convertiremos nuestro popup simplón, en un modal a pantalla completa, totalmente responsive que se adaptará a toda clase de dispositivos. Copia y pega el siguiente CSS en tu fichero style.css o directamente en el archivo index.html con el tag style.

/*
Full screen Modal 
*/
.fullscreen-modal .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .fullscreen-modal .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .fullscreen-modal .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .fullscreen-modal .modal-dialog {
     width: 1170px;
  }
}

Fuente: smarttutorials.net

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.