Cómo cargar contenido dinámico en un modal de Bootstrap

Crear un modal popup con Bootstrap es la mar de sencillo. Si tu aplicación web utiliza Bootstrap, siempre es buena idea utilizar la librería para poblar de contenido la ventana modal sin tener que recurrir a plugins de jQuery de terceros. No estamos hablando exclusivamente de contenido estático, sino también de contenido dinámico, es decir, contenido de una base de datos o contenido cargado desde una URL externa.

En este tutorial, te mostraremos cómo cargar contenido desde una URL externa en un modal popup generado con Bootstrap. Además, te enseñaremos a cargar contenido dinámico desde otra página a través de jQuery Ajax y mostrarlo en el modal popup de Bootstrap. Utilizando nuestro script de ejemplo, podrás enviar datos, variables y parámetros a una URL externa y también, podrás obtener contenido dinámico a través de jQuery Ajax.

Antes de utilizar Bootstrap para crear un modal popup, es necesario incluir primero la librería Bootstrap y jQuery.

<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>

Modal popup en Bootstrap

El siguiente HTML contiene un botón y una ventana de diálogo modal. Este botón (openBtn) ejecuta la ventana modal para mostrar el contenido de otro fichero.

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-success openBtn">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Modal with Dynamic Content</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Cargar contenido de otra página en un modal Bootstrap

En este ejemplo te muestro cómo cargar el contenido de una URL externa dentro de un modal popup de Bootstrap.

Código Javascript

Haciendo clic en el botón “Open Modal” (.openBtn), cargaremos el contenido de otra página (content.html) y lo mostraremos en el modal (#myModal).

<script>
$('.openBtn').on('click',function(){
    $('.modal-body').load('content.html',function(){
        $('#myModal').modal({show:true});
    });
});
</script>

Cargar contenido dinámico de una base de datos

Este ejemplo muestra cómo cargar el contenido dinámico basándonos en los parámetros pasados en la URL externa utilizando PHP y MySQL.

Código Javascript

Haciendo clic en el botón “Open Modal” (.openBtn), cargaremos el contenido de otro archivo PHP (getContent.php) basándonos en el ID y lo mostraremos en el modal (#myModal).

<script>
$('.openBtn').on('click',function(){
    $('.modal-body').load('getContent.php?id=2',function(){
        $('#myModal').modal({show:true});
    });
});
</script>

Script de datos en PHP y MySQL

En el fichero getContent.php, extraeremos la información solicitada de la base de datos utilizando PHP y MySQL. El contenido dinámico lo devolveremos a nuestro modal implementado en Bootstrap.

<?php
if(!empty($_GET['id'])){
    //DB details
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '*****';
    $dbName = 'noprog';
    
    //Create connection and select DB
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    
    if ($db->connect_error) {
        die("Unable to connect database: " . $db->connect_error);
    }
    
    //get content from database
    $query = $db->query("SELECT * FROM cms_content WHERE id = {$_GET['id']}");
    
    if($query->num_rows > 0){
        $cmsData = $query->fetch_assoc();
        echo '<h4>'.$cmsData['title'].'</h4>';
        echo '<p>'.$cmsData['content'].'</p>';
    }else{
        echo 'Content not found....';
    }
}else{
    echo 'Content not found....';
}
?>

Fuente: codexworld.com