Tutorial básico de Bootstrap

Complementos Bootstrap

Complemento de menú desplegable Bootstrap Complemento de efecto de transición Bootstrap

Complemento Modal (Modal) de Bootstrap

El cuadro de diálogo modal (Modal) es una ventana emergente que se superpone a la ventana padre. Generalmente, el objetivo es mostrar contenido proveniente de una fuente separada, permitiendo alguna interacción sin salir de la ventana padre. La ventana emergente puede proporcionar información, interacción, etc.

si desea citar únicamente las funciones de este complemento,则需要引用 modal.jso, como Vista general de complementos Bootstrap como se mencionó en el capítulo bootstrap.js o la versión comprimida bootstrap.min.js。

Uso

Puede cambiar el contenido oculto del complemento Modal (Modal):

a través de la propiedad dataestablecer propiedades en el elemento de controlador (por ejemplo, botones o enlaces) mediante data-toggle="modal"al mismo tiempo configurar data-target="#identifier" o href="#identifier" especificar el cuadro de diálogo modal (con id="identifier").
A través de JavaScript: Con esta técnica, puede invocar el cuadro modal con id="identifier" en una sola línea de JavaScript:
```
$('#identifier').modal(options)
```

Ejemplo en línea

Un ejemplo estático de ventana modal, como se muestra en el siguiente ejemplo:

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　ejemplo　-　Plugin de cuadro modal (Modal)/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Crear cuadro modal (Modal)</h2>
<!--　botón para activar la ventana modal　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Comienza la demostración de la ventana modal
</button>
<!--　Ventana modal (Modal)　-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"　aria-hidden="true">
					×
				</button>
				<h4　class="modal-title" id="myModalLabel">
					Título de la ventana modal (Modal)
				</h4>
			</div>
			<div class="modal-body">
				Aquí se puede agregar algún texto
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　data-dismiss="modal">Cerrar
				</button>
				<button type="button" class="btn btn-primary">
					Enviar cambios
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal　-->
</div>
</body>
</html>

Prueba a ver ‹/›

Los resultados se muestran a continuación:

Explicación del código:

Para usar la ventana modal, necesita algún tipo de desencadenador. Puede usar un botón o un enlace. Aquí usamos un botón.
Si observa detenidamente el código anterior, notará que en la etiqueta <button>,data-target="#myModal" es el objetivo del cuadro modal que desea cargar en la página. Puede crear varios cuadros modales en la página y crear desencadenadores diferentes para cada cuadro modal. Ahora, es obvio que no se pueden cargar varios módulos al mismo tiempo, pero se pueden crear varios en la página para cargar en diferentes momentos.
Hay dos puntos que deben considerarse en el cuadro modal:
Primero es .modal, se utiliza para identificar el contenido del <div> como cuadro modal.
Segundo es .fade Clase. Cuando se cambia el cuadro modal, esto causará que el contenido se desvanezca.
aria-labelledby="myModalLabel", este atributo hace referencia al título de la ventana modal.
Atributo aria-hidden="true" se utiliza para mantener invisible la ventana modal hasta que se dispara el desencadenador (por ejemplo, hacer clic en el botón relacionado).
<div>, modal-header es la clase que define estilos para la cabecera de la ventana modal.
class="close", close es una clase CSS, utilizada para establecer estilos en el botón de cierre de la ventana modal.
data-dismiss="modal", es un HTML personalizado5 Atributo de datos. Aquí se utiliza para cerrar la ventana modal.
class="modal-body", es una clase CSS de Bootstrap CSS, utilizada para establecer estilos en el cuerpo de la ventana modal.
class="modal-footer", es una clase CSS de Bootstrap CSS, utilizada para establecer estilos en la parte inferior de la ventana modal.
data-toggle="modal", HTML5 Atributo de datos personalizado data-toggle se usa para abrir la ventana modal.

Opciones

Hay algunas opciones que se pueden usar para personalizar el aspecto y la sensación de la ventana modal (Ventana Modal), que se transmiten a través del atributo de datos o JavaScript. La siguiente tabla enumera estas opciones:

Nombre de opción	Tipo/Valor predeterminado	Nombre de atributo de datos	Descripción
backdrop	booleano o cadena 'static' Valor predeterminado: true	data-backdrop	Especificar un fondo estático, el cuadro modal no se cerrará al hacer clic en el exterior.
keyboard	booleano Valor predeterminado: true	data-keyboard	Cerrar el cuadro modal al presionar la tecla escape, configurado como false, la tecla es inválida.
show	booleano Valor predeterminado: true	data-show	Mostrar el cuadro modal al inicializar.
remote	ruta Valor predeterminado: false	data-remote	Usando jQuery .load Métodos, inyectar contenido en el cuerpo del cuadro modal. Si se agrega un href con una URL válida, se cargará el contenido de la misma. Como se muestra en el siguiente ejemplo: <a　data-toggle="modal"　href="remote.html"　data-target="#modal">Haga clic aquí</a>

Métodos

A continuación se presentan algunos métodos útiles que se pueden usar con modal().

Métodos	Descripción	Ejemplo
Opciones: .modal(options)	Activar el contenido como cuadro modal. Acepta un objeto de opciones opcional.	$('#identifier').modal({ keyboard: false })
Cambiar: .modal('toggle')	Cambiar manualmente el cuadro modal.	$('#identifier').modal('toggle')
Mostrar: .modal('show')	Abrir manualmente el cuadro modal.	$('#identifier').modal('show')
Ocultar: .modal('hide')	Ocultar manualmente el cuadro modal.	$('#identifier').modal('hide')

Ejemplo en línea

A continuación se muestra un ejemplo de cómo se utiliza el método:

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　ejemplo　-　Método de complemento de cuadro modal (Modal)/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2Método de complemento de cuadro modal (Modal)/h2>
<!--　botón para activar la ventana modal　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Comienza la demostración de la ventana modal
</button>
<!--　Ventana modal (Modal)　-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"　
						aria-hidden="true">×
				</button>
				<h4　class="modal-title" id="myModalLabel">
					Título de la ventana modal (Modal)
				</h4>
			</div>
			<div class="modal-body">
				salir presionando el botón ESC.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">Cerrar
				</button>
				<button type="button" class="btn btn-primary">
					Enviar cambios
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal-dialog　-->
</div><!--　/.modal　-->
</body>
</html>

Prueba a ver ‹/›

Los resultados se muestran a continuación:

Basta con presionar la tecla ESC para que la ventana modal salga.

Eventos

La tabla a continuación enumera los eventos que se utilizan en la ventana modal. Estos eventos se pueden usar como ganchos en la función.

Eventos	Descripción	Ejemplo
show.bs.modal	se desencadena después de llamar al método show.	$('#identifier').on('show.bs.modal', function () { 　　//　Ejecutar algunas acciones... })
shown.bs.modal	se desencadena cuando la ventana modal es visible para el usuario (esperará que finalice el efecto de transición CSS).	$('#identifier').on('shown.bs.modal', function () { 　　//　Ejecutar algunas acciones... })
hide.bs.modal	al llamar al método de ejemplo hide se desencadena.	$('#identifier').on('hide.bs.modal', function () { 　　//　Ejecutar algunas acciones... })
hidden.bs.modal	Se activa cuando el cuadro de diálogo está completamente oculto para el usuario.	$('#identifier').on('hidden.bs.modal', function () { 　　//　Ejecutar algunas acciones... })

Ejemplo en línea

El siguiente ejemplo muestra el uso de eventos:

Los resultados se muestran a continuación:

Como se muestra en el ejemplo anterior, si ha hecho clic en cerrar botón, es decir ocultar Si se realiza un evento, se mostrará un mensaje de advertencia.

Complemento de menú desplegable Bootstrap Complemento de efecto de transición Bootstrap