English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Tutoriales básicos

Bootstrap4 Cuadro de diálogo

El Modal es básicamente un cuadro de diálogo o ventana emergente que se utiliza para proporcionar información importante al usuario o para pedir al usuario que tome medidas necesarias antes de continuar. Los patrones se utilizan ampliamente para alertar al usuario de sesiones de timeout, o para recibir su confirmación final antes de realizar cualquier operación crítica (por ejemplo, guardar o eliminar datos importantes).

Puede crear fácilmente diálogos inteligentes y flexibles utilizando el complemento de cuadro de diálogo de Bootstrap.

El cuadro de diálogo (Modal) es una ventana emergente que cubre la ventana padre. Normalmente, el objetivo es mostrar contenido de una fuente separada, que puede interactuar sin salir de la ventana padre. La ventana emergente puede proporcionar información interactiva, etc.

Cómo crear un cuadro de diálogo

El siguiente ejemplo resume la estructura básica de un modelo simple que crea un cuadro de diálogo con título, cuerpo del mensaje y pie de página que contiene botones de acción del usuario. A continuación, se crea un efecto de cuadro de diálogo simple :

<!DOCTYPE　html>
<html>
<head>
　　<title>Ejemplo Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Ejemplo de cuadro de diálogo</h2>
　　<!--　Botón: para abrir el cuadro de diálogo　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Abrir el cuadro de diálogo
　　</button>
　　　
　　<!--　Cuadro de diálogo　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog">
　　　　　　<div　class="modal-contenido>
　　　
　　　　　　　　<!--　Cabeza del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-cabecera">
　　　　　　　　　　<h4　class="modal-title">Cabeza del cuadro de diálogo</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-cerrar="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　Cuerpo del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Contenido del cuadro de diálogo...
　　　　　　　　</div>
　　　
　　　　　　　　<!--　Pie de página del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-pie
　　　　　　　　　　<button　type="button"　class="btn　btn-secundario"　data-cerrar="modal">cerrar</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Tamaño del cuadro de diálogo

Podemos agregar .modal-sm Para crear un pequeño cuadro de diálogo, utilice la clase .modal-La clase lg puede crear un gran cuadro de diálogo.

Las clases de tamaño se colocan en la .modal del elemento <div>-Después de la clase dialog :

<!DOCTYPE　html>
<html>
<head>
　　<title>Ejemplo Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Ejemplo de cuadro de diálogo</h2>
　　<!--　Botón: para abrir el cuadro de diálogo　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Abrir el cuadro de diálogo
　　</button>
　　　
　　<!--　Cuadro de diálogo　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-diálogo modal-sm">
　　　　　　<div　class="modal-contenido>
　　　
　　　　　　　　<!--　Cabeza del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-cabecera">
　　　　　　　　　　<h4　class="modal-title">Cabeza del cuadro de diálogo</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-cerrar="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　Cuerpo del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Contenido del cuadro de diálogo...
　　　　　　　　</div>
　　　
　　　　　　　　<!--　Pie de página del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-pie
　　　　　　　　　　<button　type="button"　class="btn　btn-secundario"　data-cerrar="modal">cerrar</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

<!DOCTYPE　html>
<html>
<head>
　　<title>Ejemplo Bootstrap　</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Ejemplo de cuadro de diálogo</h2>
　　<!--　Botón: para abrir el cuadro de diálogo　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Abrir el cuadro de diálogo
　　</button>
　　　
　　<!--　Cuadro de diálogo　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-diálogo modal-lg">
　　　　　　<div　class="modal-contenido>
　　　
　　　　　　　　<!--　Cabeza del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-cabecera">
　　　　　　　　　　<h4　class="modal-title">Cabeza del cuadro de diálogo</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-cerrar="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　Cuerpo del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Contenido del cuadro de diálogo...
　　　　　　　　</div>
　　　
　　　　　　　　<!--　Pie de página del cuadro de diálogo　-->
　　　　　　　　<div　class="modal-pie
　　　　　　　　　　<button　type="button"　class="btn　btn-secundario"　data-cerrar="modal">cerrar</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Bootstrap4 Cuadro de informaciónBootstrap4 Carrusel