Cargar contenido dinámico en bootstrap modal PHP. Cuando estemos desarrollando un sistema, hoy en día es imprescindible el uso «popup modal» por su dinamismo para mostrar la información ya sea estática o dinámica. es muy fácil de implementar con bootstrap. Sin embargo, si su trabajo web utiliza librería Bootstrap, siempre es recomendable poblar la ventana modal. Puede cargar URL externa o contenido estático en un popup.
Cargar contenido dinámico en bootstrap modal PHP
A continuación, detallaremos los pasos para su implementación debida, veremos cómo cargar el contenido de una URL externa con GET en bootstrap modal Popup. Por lo tanto, usted aprenderá cómo extraer contenido dinámico de otra página y mostrar en popup modal.
Requisitos externos para nuestro sistema
- Lenguaje de Programación PHP
- Gestor de Base de Datos MySQL
- Frameworks Bootstrap v. 3.3.7
- Lenguaje de Marcas HTML5
1. Primeramente, tenemos que tener la base de datos y la tabla
Es muy importante manejar una base de datos en el cual interactúa nuestra información para luego llamarlo desde un componente «Modal»
-- Estructura de tabla para la tabla `content_modal`
CREATE TABLE IF NOT EXISTS `content_modal` (
`id_modal` int(11) NOT NULL,
`titulo` varchar(150) CHARACTER SET utf8 NOT NULL,
`contenido` text CHARACTER SET utf8 NOT NULL,
`creado` datetime NOT NULL,
`modificado` datetime NOT NULL,
`estado` enum('1','0') COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;2. Para usar el Framework de estilos «Bootstrap» para crear el popup modal
La librería jQuery y BootStrap deben ser declarados en la cabecera de nuestro fichero HTML, veamos un ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Cargar contenido dinámico en bootstrap modal PHP - BaulPHP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Librerias a incluir -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fin de Librerias a incluir -->
</head>
<body>3. Bootstrap modal popup
El siguiente HTML contiene un botón y un diálogo modal. Este botón (openBtn) activa el bootstrap modal para mostrar el contenido de otro archivo.
<h2>Cargar contenido dinámico en bootstrap modal PHP</h2>
<!-- Desencadenar el modal con un botón -->
<br> <button type="button" class="btn btn-primary openBtn">Abrir Modal</button>
<button type="button" class="btn btn-primary openBtn2">Abrir Modal 2</button>
<br><br>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal contenido-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bootstrap Modal con contenido dinamico PHP - MySQL</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>4. Cargar contenido dinámico de una base de datos con bootstrap modal y PHP MySQL
Pasaremos contenido dinámico basado en el parámetro Pass en la URL externa usando PHP y gestor de almacenamiento MySQL.
Código JavaScript a utilizar:
Al hacer clic en el botón «Open modal» llamaremos la información existente en nuestra base de datos, sin embargo, usaremos un fichero PHP con el método GET para realizar la consulta.
/* Llamando al fichero CargarContenido.php */
$('.openBtn2').on('click',function(){
$('.modal-body').load('CargarContenido.php?id=2',function(){
$('#myModal').modal({show:true});
});
});
5. Datos extraidos dinámicos usando PHP y MySQL
En el fichero CargarContenido. php, la informacion que se solicita se recuperan dinamicamente usando PHP y MySQL, usando el metodo GET. La informacion dinámica se procesa y es devuelta visible en el modal de bootstrap.
if ($conexion->connect_error) {
die("No hay conexion con la database: " . $db->connect_error);
}
//Traer contenido de la base de datos
$conexion->set_charset("utf8");
$query = $conexion->query("SELECT * FROM content_modal WHERE id_modal = {$_GET['id']}");
if($query->num_rows > 0){
$contenido = $query->fetch_assoc();
echo '<h4>'.$contenido['titulo'].'</h4>';
echo '<p>'.$contenido['contenido'].'</p>';
}else{
echo 'No hay contenido...';
}
}else{
echo 'No hay contenido...';
}
Conclusión
Espero que esta breve explicación les sirva bastante en el desarrollo de sus proyectos o páginas web. Por lo tanto, les dejare el fichero comprimido donde están todos los archivos y la base de datos, para que lo implementen rápidamente.
Ante cualquier duda, realicen sus comentarios.
