Bootstrap 3 - Diferentes link con una sola ventana modal dinámica

Buenas tardes,

A ver si me pueden echar un cable, tengo diferentes <div> con links. Me gustaría que esos links abrieran siempre la misma ventana modal. Pero necesito que el contenido de la ventana modal cambie dinámicamente, ¿Conocen algún link, con un ejemplo de como hacerlo?

Es decir, dependiendo del link donde haga clic, el modal-header, el modal-body y el modal-footer, tendrán un contenido diferente.

Saludos y gracias,

Respuestas

No tengo un link a la mano, pero te puedo explicar de que forma lo hago normalmente.

En mi plantilla principal coloco el siguiente <div> como envoltura de la ventana modal:

plantilla.html

<!-- Esta es la envoltura de las ventanas modales de bootstrap, el contenido como: header, body o footer se cargarán en este contenedor vía ajax (específicamente load)  -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"></div>

Pondré un botón como ejemplo, pero funcionará igual con todos los que necesites:

archivo.html

<!-- La clase se utilizará para capturar el evento click, el data-idmodal nos indicará que sección del archivo contiene la modal, así evitamos cargar toda una página vía ajax -->
<a href="http://example.com/archivoConModal.html" class="btnModal" data-idmodal="#divModal" title="Demo modal">Click</a>

archivoConModal.html

<div id="divModal" class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Mi modal dinámica</h4>
        </div>
        <div class="modal-body">
            <p>Hola mundo</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>
    </div>
</div>

Este es el código que le da la funcionalidad a la modal

$('.btnModal').on("click", function(event) {
    event.preventDefault();
 
    var $contenedorModal = $('#myModal');
    var urlModal         = $(this).attr("href");
    var idModal          = $(this).data("idmodal");
 
    $contenedorModal.load(urlModal + ' ' + idModal , function(response) {
    $(this).modal({backdrop: "static"});
    });
});

Espero que sea de ayuda, para mostrar el código de forma simple tome el que utilizo y le hice algunos cambios, realmente no lo he probado con estos cambios, sería cosa de testearlo un poco, pero básicamente esta es la idea.

@ORODii

9 enero 2016, 6:35

No tengo respuesta, si tengo preguntas: ¿En qué versión de Bootstrap funcionaría? Donde estoy probando y hasta donde pude comprobar con varios scripts no me ha funcionado, unicamente carga la primer url remota y no carga las siguientes.

Dejo códigos para ver qué estoy haciendo mal: Esta es la modal en index.html

<!-- Modal -->
<div class="modal fade" data-refresh="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:51%;">
        <div class="modal-content">
 
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Los enlaces en index.html (n = cantidad variable)

<a href="externo_1.html" data-remote="externo_1.html"  data-toggle="modal" data-target="#myModal">Enlace_1</a>
<a href="externo_2.html" data-remote="externo_2.html"  data-toggle="modal" data-target="#myModal">Enlace_2</a>
<a href="externo_n.html" data-remote="externo_n.html"  data-toggle="modal" data-target="#myModal">Enlace_n...</a>

El codigo en cada documento externo

<div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="myModalLabel">El titulo a mostrar</h4>
            </div>         <!-- /modal-header -->
            <div class="modal-body">
             ...contenido...
            </div>         <!-- /modal-body -->

Se supone que debería funcionar usando Bootstrap v3.1.0

@egoloco

21 mayo 2016, 15:39

Hola está bien el código solo una pregunta porque no hace la validación

@jaisiel_1

10 agosto 2016, 21:15