0

Tengo una app en Bootstrap la cual tiene que mostrar diferentes modales en diferentes paginas. Para ello he pensado sacar dichos modales y tener cada uno en un archivo HTML de forma que después desde cada pagina pueda llamarlo para que se muestre. Lo quiero hacer así para no tener que declarar en los diferentes HTML los mismos Divs con los modales de forma que si tengo que crear un HTML nuevo, no tenga que hacer un copy paste con todos los modales.

Resumen: No consigo tener un modal en un HTML diferente y desde una función JS llamarlo. Alguien ha hecho esto? Me podéis echar un cable?

Muchas gracias!

En el ejemplo de abajo, replico la pagina1.html, a lo que me refiero es, si por ejemplo en la pagina2.html necesito solo 2 de los 3 modales, me tocaria replicar el codigo de

<!DOCTYPE html>
<html>
    <head>
     ...
    </head>
    <body>
        <button onclick='openModalOne()'>Open One</button>
        <button onclick='openModalTwo()'>Open Two</button>
        <button onclick='openModalThree()'>Open Three</button>
        <div class="modal fade" id="dialogError" tabindex="-1" role="dialog" aria-hidden="true">
            ....
        </div>
        <div class="modal fade" id="dialogInfo" tabindex="-1" role="dialog" aria-hidden="true">
            ....
        </div>
        <div class="modal fade" id="dialogConfirm" tabindex="-1" role="dialog" aria-hidden="true">
            ....
        </div>
    </body>

</html>
5
  • Recomiendo que se lea esta Documentacion: blog.hostdime.com.co/… el 12 jun. 2018 a las 9:40
  • 1
    ¿Podrías crear un ejemplo mínimo verificable para ver tu código y poder ayudarte mejor?
    – Kiko_L
    el 12 jun. 2018 a las 9:49
  • Existen varias opciones, dependiendo de las herramientas que uses para desarrollar tu aplicación: Ajax, incluir un HTML en otro... el 12 jun. 2018 a las 9:56
  • Acabo de editar la pregunta añadiendo un trozo de codigo de ejemplo. el 12 jun. 2018 a las 9:56
  • Hola, ¿Qué hacen las funciones openModal() en tu código?
    – Ferni
    el 12 jun. 2018 a las 11:09

3 respuestas 3

1

A menos que estés ocupando un motor de plantillas que permita el uso de plantillas parciales (ej Twig, Handlebars) inevitablemente vas a tener que repetir cierto código en cada una de tus páginas.En otras palabras: debieras usar un motor de plantillas para facilitarte la vida.

Sin embargo, este comportamiento se podría emular si insertaras el html de los modales dinámicamente mediante ajax, y a su vez llenases el contenido de cada modal dinámicamente usando ajax, leyendo un atributo del botón que lo llamó:

Pensemos que en cada página pones, al pié de ésta, un script que inserte el div que contiene los modales y sus respectivos botones:

<body>
    <div>
       Contenido cualquiera
    </div>
    <div id="modales">

    </div>
    <script src="modales.js"></script>
</body>

A su vez. modales.js carga via ajax los botones que abren tu modal y el esqueleto mismo del modal, cuyo html se encuentra en un archivo distinto llamado (muy originalmente) modales.html

  jQuery(document).ready(function() {
    jQuery.get('modales.html').then(function(content) {
      jQuery('#modales').empty().append(content);
    });
  });

En modales.html podrías tener el html que no quieres repetir una y otra vez:

<div id="modal-show-page" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>


<p>
  <a class="btn btn-primary" data-toggle="modal" data-target="#modal-show-page" data-href="exito.html">Modal de Éxito</a>

  <a class="btn btn-warning" data-toggle="modal" data-target="#modal-show-page" data-href="error.html">Modal de Error</a>
</p>

Si te fijas, tengo un solo contenedor modal, pero dos botones que lo abren. Cada botón tiene un atributo data-href que apunta a otro html que voy a cargar dentro del modal abierto usando:

jQuery('#modales').find('#modal-show-page').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget);
    var href = button.data('href');
    var modal = $(this);
    jQuery.get(href).then(function(content) {
      modal.find('.modal-content').empty().append(content);
    });
  });

El contenido de modales.html no existe antes de cargar ese html por ajax, de manera que estoy usando delegación de eventos usando el contenedor #modales que sí existe desde un comienzo.

Te dejo un plunkr funcionando.

0

Lo más sencillo (en mi opinión) es que hagas en la parte del html donde quieras poner la modal <?php include 'modalquesea.php';?> y en ese archivo externo .php pones el código de la modal. Deberas correrlo en un servidor local, no te funcionará si simplemente abres el archivo con el navegador.

Tambien puedes hacerlo con ajax, como te comentan, pero si no va a ser dinámico y siempre cargará la misma modal en la misma pagina yo creo que es más "limpio" hacerlo con php.

1
  • No sé si el OP está utilizando PHP...
    – Kiko_L
    el 12 jun. 2018 a las 11:18
0

Estoy asumiendo que estás usando Bootstrap 3.

Una buena opción es crearte un div contenedor en tu página principal donde se van a cargar tus htmls estáticos con los distintos modales:

<div id="miModal" class="modal fade text-center">
    <div class="modal-dialog">
      <div class="modal-content">
      </div>
    </div>
  </div>

En dicho modal cargarás los diferentes htmls diciendo que el target es tu div genérico y que el href es la página que quieres cargar en tu modal:

<button href="pagina1.html" data-toggle="modal" data-target="#miModal">Open One</button>
<button href="pagina2.html" data-toggle="modal" data-target="#miModal">Open Two</button>

Además, cuando se oculta una modal tendrás que borrar tanto la modal en sí como el contenido (si no, al crear la nueva modal, se mantendrá unos instantes el contenido anterior de la modal):

$(this).removeData('bs.modal'); //Borramos la modal
$(this).find(".modal-content").empty(); //Vaciamos su contenido

Te dejo una demo funcionando:

Demo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.