JS modal (modal.js)
El plug-in Modal es una ventana de la caja / emergente de diálogo que aparece en la parte superior de la página actual.
Para ver un tutorial sobre Modals, lea nuestra Bootstrap modal Tutorial .
Las clases modales Plugin
| Clase | Descripción |
|---|---|
| .modal | Crea un modal |
| .modal-content | Estilos modal adecuadamente con borde, color de fondo, etc. Utilice esta clase para agregar el modal de cabecera, cuerpo y pie de página. |
| .modal-header | Define el estilo de la cabecera de la modal |
| .modal-body | Define el estilo para el cuerpo de la modal |
| .modal-footer | Define el estilo del pie de página en el modal. Nota: Esta zona está alineado a la derecha de forma predeterminada. Para cambiar esto, sobrescribir con CSS text-align: left | centro |
| .modal-sm | Especifica un pequeño modal |
| .modal-lg | Especifica una gran modal |
| .fade | Añade un efecto de animación / transición que se desvanece el referente dentro y fuera |
Desencadenar el modal Via data-* Atributos
Añadir data-toggle="modal" y data-target="#modalID" a cualquier elemento.
Nota: Para <a> elementos, omita data-target , y el uso de href="#modalID" en su lugar:
Ejemplo
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Links -->
<a data-toggle="modal"
href="#myModal">Open
Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open
Modal</p>
Inténtalo tú mismo " Activación Mediante JavaScript
Habilitar manualmente con:
Opciones modales
Las opciones pueden ser transmitidos a través de los atributos de datos o JavaScript. Para los atributos, al añadir el nombre de opción de de datos, como en la data-backdrop="" .
| Nombre | Tipo | Defecto | Descripción | Intentalo |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | Especifica si el modal debe tener una capa oscura:
Si especifica el valor "static" , no es posible cerrar el modal cuando se hace clic fuera de ella | El uso de JS Utilizando datos |
| keyboard | boolean | true | Especifica si el modal se puede cerrar con la tecla de escape (Esc) :
| El uso de JS Utilizando datos |
| show | boolean | true | Especifica si se debe mostrar el modal cuando se inicializa | El uso de JS Utilizando datos |
Métodos modales
En la siguiente tabla se enumeran los métodos modales todos disponibles.
| Método | Descripción | Intentalo |
|---|---|---|
| .modal( options ) | Activa el contenido como un modal. Ver opciones anteriores para valores válidos | Intentalo |
| .modal("toggle") | Alterna el modal | Intentalo |
| .modal("show") | Abre el modal | Intentalo |
| .modal("hide") | Oculta el modal | Intentalo |
modales Eventos
En la siguiente tabla se enumeran los eventos modales todos disponibles.
| Evento | Descripción | Intentalo |
|---|---|---|
| show.bs.modal | Se produce cuando el modal está a punto de ser mostrado | Intentalo |
| shown.bs.modal | Se produce cuando el modal se muestra totalmente (después de las transiciones CSS han completado) | Intentalo |
| hide.bs.modal | Se produce cuando el modal está a punto de ser ocultado | Intentalo |
| hidden.bs.modal | Se produce cuando el modal está totalmente oculta (después de las transiciones CSS han completado) | Intentalo |
Ejemplos
Login modal
El siguiente ejemplo crea un referente para la entrada:
Ejemplo
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn btn-default btn-lg" id="myBtn">Login</button>
<!--
Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span>
Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter
email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter
password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon
glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left"
data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>
Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div> Inténtalo tú mismo "