En este tutorial vamos a enviar datos a una ventana modal. Esto nos sirve para manejar datos dinámicamente y solo tener una ventana modal, en vez de tener múltiples y hacer más pesada la página. Cabe aclarar que esto es dependiendo de las necesidades de cada quien. Te mostraré dos opciones de como lo puedes hacer.
Opción 1
Agregando los botones
Vamos a agregar 3 botones para abrir la misma ventana modal, en esta ocasión usaré Bootstrap para facilitar el CSS de la creación del modal.
El valor que vamos a enviar será el que está en el atributo “data-info” tú puedes pasar un array, un número o el valor que necesites.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ventanaModal"
data-info="Ventana Modal 1">
Botón 1
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ventanaModal"
data-info="Ventana Modal 2">
Botón 2
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ventanaModal"
data-info="Ventana Modal 3">
Botón 3
</button>
Creamos la ventana modal
En la etiqueta div con la clase modal-body pondremos la información que mandaremos.
<!-- Ventana Modal -->
<div class="modal fade" id="ventanaModal" tabindex="-1" aria-labelledby="ventanaModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModal1Label">Titulo de la ventana</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Información -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
Obtener los datos con jQuery
Creamos la función click() para enviar los datos, en este ejemplo solo estamos enviando la información que se encuentra en el atributo data-info. Cada vez que se da click en un botón se envía la respectiva info.
$(document).ready(function () {
$(".btn-primary").click(function () {
let info = $(this).data('info');
$('.modal-body').html(info);
console.log(info);
});
});
Resultado
Juntamos el ejemplo anterior y veremos el resultado.
See the Pen Enviar datos – opcíón 1 by Alam (@alamdtech) on CodePen.
Opción 2
Agregando los botones
La estructura se ve muy parecida a la opción 1, pero la diferencia es el evento onclick que está en cada botón, de esta manera estamos ejecutando la función obtenerInfo(datos, objetivo).
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ventanaModal"
onclick="obtenerInfo('Ventana Modal 1', 'modal-body')">
Botón 1
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ventanaModal"
onclick="obtenerInfo('Ventana Modal 2', 'modal-body')">
Botón 2
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ventanaModal"
onclick="obtenerInfo('Ventana Modal 3', 'modal-body')">
Botón 3
</button>
Creamos la ventana modal
En la etiqueta div con la clase modal-body pondremos la información que mandaremos.
<!-- Ventana Modal -->
<div class="modal fade" id="ventanaModal" tabindex="-1" aria-labelledby="ventanaModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModal1Label">Titulo de la ventana</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Información -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
Obtener los datos con Jquery
La función obtenerInfo() recibe 2 parámetros:
- Datos: La información que se envía al modal.
- Objetivo: Donde se mostrará la información del primer parámetro.
function obtenerInfo(datos, objetivo) {
$(`.${objetivo}`).html(datos);
}
Resultado
Juntamos el ejemplo anterior y veremos el resultado.
See the Pen Enviar datos – opcíón 2 by Alam (@alamdtech) on CodePen.