Lenguaje PHP

Cargar contenido dinámico en bootstrap modal PHP

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

  1. Lenguaje de Programación PHP
  2. Gestor de Base de Datos MySQL
  3. Frameworks Bootstrap v. 3.3.7
  4. Lenguaje de Marcas HTML5
Modal PHP MySQL
Modal PHP MySQL

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">
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">&lt;/script>
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">&lt;/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">&times;</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...';
}

 

Cargar contenido dinámico en bootstrap modal PHP
Cargar contenido dinámico en bootstrap modal PHP

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.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

7 comentarios

  1. Buenas tardes. Tengo una consulta. necesito desplegar datos de una tabla en una etiqueta select option. estoy usando php, js y deseo mostrar los datos de la base en un select dentro de un modal de boostrap. si podria ayudarme se le agradeceria. gracias.

  2. Muy buenas de nuevo.

    Tengo una cosulta que no se como solucionar ya que la variable v del get la obtuviera desde el enlace que abre el modal de la siguiente manera:

    <a type="button" data-id="”>

    el valor de data-id es el que quiero ‘colocar’ en la url del modal pero no consigo como realizarlo. No es PHP pero si me puedes ayudar te lo agradezco. Gracias de antemano.

    /* Llamando al fichero CargarContenido.php */
    $(‘.openBtn2’).on(‘click’,function(){
    $(‘.modal-body’).load(‘CargarContenido.php?id=[[[[[valor de data-id]]]]]’,function(){
    $(‘#myModal’).modal({show:true});
    });
    });

  3. hola, estoy haciendo un proyecto mvc en el cual valido que los campos de un formulario no esten vacios en mi clase controller y quiero que me muestre el mensaje en el modal si los campos estan vacios pero al darle al boton enviar no hace nada

  4. Hola amigo,

    Primero que todo debo decir que tienes un muy buen blog.

    Requiero de tu ayuda. Tengo una pagina php en la cual tengo una tabla que trae de manera dinámica datos desde mysql, en esa cada fila de la tabla tengo un botón en el cual al dar click me abre una ventana modal Bootstrap en la cual quiero que me traiga los datos de la fila seleccionada pero no logro que funcione no me pasa los datos. Espero me puedas ayuda.

    De antemano Gracias,

    1. Saludos Andres

      Tienes que modificar el ID del registro en esta seccion

      
      
      

      Modifica el ID, el ID que quieres que se muestre en el Modal

      Puedes incorporarlo de manera dinámica haciendo consulta MySQL

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba