Bootstrap es un marco CSS utilizado para diseñar páginas web. Bootstrap v4.5 es la última versión. Bootstrap junto con HTML y JavaScript se pueden usar para crear páginas web receptivas.
Un modal es una ventana emergente o cuadro de diálogo que requiere que se realice alguna acción. Un modal. Bootstrap tiene un componente modal incorporado. El modal consta de dos partes, el encabezado modal y el cuerpo modal. Los datos se pueden pasar al cuerpo modal desde el documento HTML que se muestra cuando aparece el modal. Para pasar datos al cuerpo modal se utilizan métodos jquery.
jQuery es similar a JavaScript, sin embargo, los métodos de jQuery son simples y más fáciles de implementar. jQuery reduce las líneas de código. El artículo muestra dos ejemplos en los que se pasan datos al cuerpo modal desde el cuerpo del documento HTML.
Ejemplo 1: En este enfoque, la página web consta de dos campos de entrada Nombre y Marcas que acepta la entrada del usuario. Los datos ingresados en los campos de entrada se extraen utilizando los identificadores de los campos respectivos mediante el método jQuery val(). A continuación, los datos obtenidos de los campos de entrada se concatenan en una string. Esta string se pasa al cuerpo modal mediante el método html() de jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import bootstrap cdn -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!-- Import jquery cdn -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container mt-2">
<!-- Input field to accept user input -->
Name: <input type="text" name="name"
id="name"><br><br>
Marks: <input type="text" name="marks"
id="marks"><br><br>
<!-- Button to invoke the modal -->
<button type="button" class="btn btn-primary
btn-sm" data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
Confirmation
</h5>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<!-- Data passed is displayed
in this part of the
modal body -->
<h6 id="modal_body"></h6>
<button type="button"
class="btn btn-success btn-sm"
data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#submit").click(function () {
var name = $("#name").val();
var marks = $("#marks").val();
var str = "You Have Entered "
+ "Name: " + name
+ " and Marks: " + marks;
$("#modal_body").html(str);
});
</script>
</body>
</html>
Producción
Ejemplo 2: en este enfoque, se utiliza un área de texto para recibir información del usuario. Cuando se hace clic en el botón Enviar, se invoca la función jQuery. Los datos ingresados en el área de texto se extraen utilizando el método val() en la variable de texto. Esta string de texto se pasa al cuerpo modal mediante el método html() de jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import bootstrap cdn -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!-- Import jquery cdn -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container mt-2">
<!-- Input field to accept user input -->
<textarea id="textarea" rows="4"
cols="50">
</textarea><br>
<!-- Button to invoke the modal -->
<button type="button"
class="btn btn-success btn-sm"
data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
<!-- modal -->
<div class="modal fade" id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
Entered Data
</h5>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<!-- Data passed is displayed
in this part of the
modal body -->
<p id="modal_body"></p>
<button type="button"
class="btn btn-warning btn-sm"
data-toggle="modal"
data-target="#exampleModal">
Proceed
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#submit").click(function () {
var text = $("#textarea").val();
$("#modal_body").html(text);
});
</script>
</body>
</html>
Producción
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA