18

Tengo el siguiente código para mostrar ventanas modales que deseo usar en mi proyecto.

No tiene ningún problema, sólo que debo incluir más de 40 modales, esto hace que mi archivo sobrepase las tres mil líneas.

Son modales básicos de Bootstrap 3, se repiten n veces tanto el código de los modales como el código de las etiquetas <a> que los abren, lo único que cambian son los ID o href y el contenido interno de cada modal.

<!--Mapa1-->
<div class="col-sm-4 text-center">
  <div class="blog-inner">
    <a href="#modal1" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
    <div class="desc">
      <h3><a href="#modal1" data-toggle="modal">Sede Colombia</a></h3>
    </div>
  </div>
</div>

<!--Mapa2-->
<div class="col-sm-4 text-center">
  <div class="blog-inner">
    <a href="#modal2" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
    <div class="desc">
      <h3><a href="#modal2" data-toggle="modal">Sede Seul</a></h3>
    </div>
  </div>
</div>


<!-- Modal 1-->
<div class="portfolio-modal modal fade" id="modal1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body">
            <h2>Sede Principal Colombia</h2>
            <hr><br>
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728" width="800" height="400" frameborder="0"
              style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
            <br><br>
            <hr>
            <p><b>Dirección:</b> Bogotá - Colombia
              <br>
              <b>Teléfonos:</b> (2) 123 4567
            </p>
            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2-->
<div class="portfolio-modal modal fade" id="modal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body">
            <h2>Sede Administrativa Seul</h2>
            <hr><br>
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728" width="800" height="400" frameborder="0"
              style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
            <br><br>
            <hr>
            <p><b>Dirección:</b> Seul - Corea del Sur
              <br>
              <b>Teléfonos:</b> (2) 123 4567
            </p>
            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Lo que quiero es depurar este código para evitar repetir tanto código que básicamente el mismo.

Tengo varias ideas, lo primero es usar un php con dos includes del código que se repite, algo como esto más o menos.

/* modal-start.php */

<div class="modal-content">
  <div class="close-modal" data-dismiss="modal">
    <div class="lr">
      <div class="rl">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2">
        <div class="modal-body">


          /* modal-end.php */

          <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<!--Mapa1-->
<div class="col-sm-4 text-center">
  <div class="blog-inner">
    <a href="#modal1" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
    <div class="desc">
      <h3><a href="#modal1" data-toggle="modal">Sede Colombia</a></h3>
    </div>
  </div>
</div>

<!--Mapa2-->
<div class="col-sm-4 text-center">
  <div class="blog-inner">
    <a href="#modal2" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
    <div class="desc">
      <h3><a href="#modal2" data-toggle="modal">Sede Seul</a></h3>
    </div>
  </div>
</div>


<!-- Modal 1-->
<div class="portfolio-modal modal fade" id="modal1" tabindex="-1" role="dialog" aria-hidden="true">

  <?php include 'modal-start.php'; ?>

  <h2>Sede Principal Colombia</h2>
  <hr><br>
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728" width="800" height="400" frameborder="0"
    style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
  <br><br>
  <hr>
  <p><b>Dirección:</b> Bogotá - Colombia
    <br>
    <b>Teléfonos:</b> (2) 123 4567
  </p>

  <?php include 'modal-end.php'; ?>

  <!-- Modal 2-->
  <div class="portfolio-modal modal fade" id="modal2" tabindex="-1" role="dialog" aria-hidden="true">

    <?php include 'modal-start.php'; ?>

    <h2>Sede Administrativa Seul</h2>
    <hr><br>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728" width="800" height="400" frameborder="0"
      style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
    <br><br>
    <hr>
    <p><b>Dirección:</b> Seul - Corea del Sur
      <br>
      <b>Teléfonos:</b> (2) 123 4567
    </p>

    <?php include 'modal-end.php'; ?>

No creo que sea muy práctico este método ni muy ortodoxo.

Podría hacerlo también con Javascript pero no estoy segura si pueda incluir todo el código html en el inner, algo así:

document.getElementById("demo").innerHTML = " <div class="modal-content"> 
<div class="close-modal" data-dismiss="modal"> 
<div class="lr"> 
<div class="rl"> 
</div> 
</div> 
</div> 
<div class="container"> 
<div class="row"> 
<div class="col-lg-8 col-lg-offset-2"> 
<div class="modal-body">";

Al punto que quiero llegar, es que no quiero reinventarme la rueda, si ya existe una función o un parámetro que me permita automatizar este copy/paste y evitar la repetición de código, me sería perfecto.

Muchas gracias!

7
  • 1
    Y en lugar de incluir 40 modales si todas son iguales no puedes hacer una sola y cambiar su contenido según quien la lance? Commented el 29 may. 2019 a las 16:12
  • ¿Es posible que necesites mostrar más de un modal a la vez? Commented el 29 may. 2019 a las 16:14
  • Gracias Pablo, no. Solo se muestra un modal por vez. Perdón por no hacer mi código ejecutable, estoy usando este mismo código es.stackoverflow.com/questions/219313/…
    – LauraZ
    Commented el 29 may. 2019 a las 16:20
  • @FernandoCarrascosa sí podría!. ¿quisieras orientarme sobre cómo lograrlo?
    – LauraZ
    Commented el 29 may. 2019 a las 16:29
  • 1
    Y si guardas la información en una base de datos y luego la asignas a un único modal al seleccionar el país... No se, solo se me ocurre!
    – DjCrazy
    Commented el 29 may. 2019 a las 16:33

3 respuestas 3

19

Crea una plantilla del modal vacía. Cuando necesites usarla, rellénala con los datos que necesites antes de mostrarla. En lugar de tener 40 modales, puedes tener en una variable Javascript un array con 40 registros que guarden la información de cada modal y simplemente rellenarla cuando vayas a mostrarla:

const modalesMapa = [
  { 
    titulo: "Titulo uno",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: ...
  },
 ...
  { 
    titulo: "Titulo cuarenta",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: ...
  }
];

//Función a ejecutar cuando se quiera mostrar el modal.
function rellenarModal(n) {
  const datos=modalesMapa[n];
  document.getElementById('headerModal').innerHtml = datos.titulo;
  document.getElementById('mapa').src = datos.iframeSrc;
  ...
}

De este modo tendrás un código mucho más manejable.

Si quisieras crear más de un modal a la vez, podrías hacer algo similar pero usando una etiqueta plantilla (<template>) e ir clonando y eliminando, pero ya sería algo más complejo y creo que no te hará falta.

Un ejemplo sencillo, que espero que puedas adaptar a tu modal:

//array con todos los datos
const datosModal = [
  { titulo: 'Titulo 1', texto :'Esto es el texto del modal 1'},
  { titulo: 'Titulo 2', texto :'Esto es el texto del modal 2'},
  { 
    titulo: 'El quijote', 
    texto :'<p>En un lugar de la mancha, de cuyo nombre no quiero acordarme...</p>'
  }
];

//funcion que copia los datos al modal y lo muestra
function copiarDatos(indice) {
   const datos = datosModal[indice];
   document.getElementById('titulo').innerText= datos.titulo;
   document.getElementById('cuerpo-modal').innerHTML = datos.texto;
   document.getElementById('modal').style.display='block';
   document.getElementById('fondo').style.display='block';
}

//a cada botón le asignamos el evento "copiar datos y mostrar modal", en el orden en que están en el HTML.
document.querySelectorAll('.mostrar').forEach((boton,index) => {
  boton.addEventListener('click',() => copiarDatos(index));
});


//el botón "cerrar oculta el modal
document.getElementById('close')
  .addEventListener('click',() => {
    document.getElementById('modal').style.display='none';
    document.getElementById('fondo').style.display='none';
  });
#modal {
  position: relative;
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgrey;
  width: 300px;
  height: 100px;
  display: none;
  padding: 3px;
  z-index: 50;
}

button#close {
  position: absolute;
  bottom : 2px;
  right: 45%;
}

#modal h4 {
  margin: 5px;
  
}

#fondo {
  opacity: .6;
  background-color: navy;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10;
  left: 0;
  display: none;
}
<button class="mostrar"> Muestra modal 1</button>
<button class="mostrar"> Muestra modal 2</button>
<button class="mostrar"> Muestra modal 3</button>

<div id="modal">
  <h4 id="titulo"></h4>
  <div id="cuerpo-modal"></div>
  <button id="close">Cerrar</button>
</div>

<div id="fondo"></div>

2
  • Quizá en lugar de usar un array como mapa podría hacer un objeto y añadir a los distintos enlaces una data-property con el valor del objeto al que apuntar, si no, encontrarlo en un array puede ser complicado Commented el 29 may. 2019 a las 16:59
  • 1
    Gracias por tu respuesta Pablo, mi proyecto está funcionando de maravilla gracias a ti!
    – LauraZ
    Commented el 4 jun. 2019 a las 17:01
5

Debes tener en cuenta lo siguiente:

Generar una plantilla de la modal que necesitas

<div class="modal fade" id="template" tabindex="-1" role="dialog" >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="titulo"></h5>
        </div>
        <div class="modal-body">
          <div id="cuerpo-modal"></div>
            <span id="direccion"></span>
            <span id="iframeSrc"></span>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

Crear un arreglo de los datos que tienes:

const modalesMapa = [
  { 
    titulo: "Titulo uno",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: "direccion1"
  },
  { 
    titulo: "Titulo cuarenta",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: "direccion2"
  }

Los Botones le agregas el id del arreglo que necesitas que se visualice por medio de data-id ademas de una clase para identificar que botones modales quieres que se vea la modal en el ejemplo use btn-modal

<button type="button" class="btn btn-primary btn-modal" data-id="0" >Direccion 1</button>

Finalmente Capturamos el evento click actualizamos los datos y mostramos la modal:

$('.btn-modal').click(function() {

    const datos = modalesMapa[$(this).attr("data-id")];
   $('#titulo').text(datos.titulo);
   $('#iframeSrc').text(datos.iframeSrc);
   $('#direccion').text(datos.textoDireccion);
   $('#template').modal('show');
   $('#template').modal('show');
});

Todo lo explicado vuelto Codigo

const modalesMapa = [
  { 
    titulo: "Titulo uno",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: "direccion1"
  },
  { 
    titulo: "Titulo cuarenta",
    iframeSrc: "https://www.google.com/maps/embed ...",
    textoDireccion: "direccion2"
  }
];
$('.btn-modal').click(function() {

	  const datos = modalesMapa[$(this).attr("data-id")];
    $('#titulo').text(datos.titulo);
    $('#iframeSrc').text(datos.iframeSrc);
    $('#direccion').text(datos.textoDireccion);
    $('#template').modal('show');
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-modal" data-id="0" >Direccion 1</button>

<button type="button" class="btn btn-primary btn-modal" data-id="1" >Direccion 2</button>

<div class="modal fade" id="template" tabindex="-1" role="dialog" >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="titulo"></h5>
        </div>
        <div class="modal-body">
          <div id="cuerpo-modal"></div>
            <span id="direccion"></span><br/>
            <span id="iframeSrc"></span>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

1
  • 3
    Muchas gracias Jack por tu paciencia y tu respuesta extensa que no sólo me sirvió a mi, sino esperemos a más personas a futuro! Un abrazo!
    – LauraZ
    Commented el 4 jun. 2019 a las 17:02
4

Como idea, podrias hacer un arbol json donde desarrolles el html que quieres mostrar en tu pagina.

El html se construye dinamicamente a partir de este arbol json, en el cual puedes añadir, modificar o eliminar elementos, etiquetas, estilos, etc..... Así es como trabajan frameworks javascript avanzados como React, que crean una copia del DOM html en un json en la memoria del navegador.

Puedes cambiar la funcion :


function crearArbolHTML(arbolCompleto, idElementoPadre) {
      for (var m = 0; m < arbolCompleto.length; m++) {
        document
          .getElementById(idElementoPadre)
          .appendChild(crearElementoHTML(arbolCompleto[m]));
      }
    }

y poner:


function crearArbolHTML(arbolCompleto, idElementoPadre) {
      for (var m = 0; m < 5; m++) {
        document
          .getElementById(idElementoPadre)
          .appendChild(crearElementoHTML(arbolCompleto[0]));
      }
    }

Puedes ver como se repite el mismo elemento de arbol las veces que quieras. O puedes añadir los elementos que tu quieras siempre que los añadas a los Switch de las opciones y los estilos.

Dejo también un enlace en StackBlitz


    <div id="divDePrueba"></div>

  <script>
    const modalesMapa = [
      {
        titulo: "Modal 1",
        arbolHtml: {
          etiqueta: "div",
          estilos: {
            clases: ["blog-inner"]
          },
          hijos: [
            // Primer hijo, etiqueta <a>
            {
              arbolHtml: {
                etiqueta: "a",
                opciones: {
                  href: "#modal1",
                  "data-toggle": "modal"
                },
                hijos: [
                  // Primer hijo de <a>, etiqueta <img>
                  {
                    arbolHtml: {
                      etiqueta: "img",
                      opciones: {
                        src:
                          "https://i.ytimg.com/vi/PV43t9j8o-E/maxresdefault.jpg",
                        alt: "Mapa"
                      },
                      estilos: {
                        clases: ["img-responsive"]
                      }
                    }
                  }
                ]
              }
            },
            // Segundo hijo, etiqueta <div>
            {
              arbolHtml: {
                etiqueta: "div",
                estilos: {
                  clases: ["desc"]
                },
                hijos: [
                  // Primer hijo de <div>, etiqueta <h3>
                  {
                    arbolHtml: {
                      etiqueta: "h3",
                      hijos: [
                        // Primer hijo de <h3>, etiqueta <a>
                        {
                          arbolHtml: {
                            etiqueta: "a",
                            texto: "Sede Colombia",
                            opciones: {
                              href: "#modal1",
                              "data-toggle": "modal"
                            }
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ];

    function crearElementoHTML(elem, padre) {
      var elemento = elem.arbolHtml;
      var nuevoElementoHTML;
      if (elemento.etiqueta === "img") {
        nuevoElementoHTML = new Image(400, 400);
        nuevoElementoHTML.src = "https://i.ytimg.com/vi/PV43t9j8o-E/maxresdefault.jpg"
      } else nuevoElementoHTML = document.createElement(elemento.etiqueta);

      if (elemento.opciones)
        nuevoElementoHTML = añadirOpciones(
          elemento.opciones,
          nuevoElementoHTML
        );
      if (elemento.estilos)
        nuevoElementoHTML = añadirEstilos(elemento.estilos, nuevoElementoHTML);
      if (elemento.texto) {
        var nodoTexto = document.createTextNode(elemento.texto);
        nuevoElementoHTML.appendChild(nodoTexto);
      }
      if (elemento.hijos && elemento.hijos.length > 0) {
        for (var a = 0; a < elemento.hijos.length; a++) {
          var elementoHijo = elemento.hijos[a];
          nuevoElementoHTML.appendChild(
            crearElementoHTML(elementoHijo, elemento)
          );
        }
      }
      return nuevoElementoHTML;
    }

    function añadirOpciones(opciones, elemento) {
      console.log(
        "Object.keys(opciones) =================>>>>>>>>>>",
        Object.keys(opciones)
      );
      for (var i = 0; i < Object.keys(opciones).length; i++) {
        var opcion = Object.keys(opciones)[i];
        switch (opcion) {
          case "href":
            console.log("entra en href");
            elemento.href = opciones.href;
          case "data-toggle":
            elemento["data-toggle"] = opciones["data-toggle"];
          case "src":
            elemento.src = opciones.src;
          case "alt":
            elemento.setAttribute("alt", opciones.alt);
        }
      }
      return elemento;
    }

    function añadirEstilos(estilos, elemento) {
      for (var i = 0; i < Object.keys(estilos).length; i++) {
        switch (Object.keys(estilos)[i]) {
          case "clases":
            for (var x = 0; x < estilos.clases.length; x++) {
              elemento.setAttribute("class", estilos.clases[x]);
            }

        }
      }
      return elemento;
    }

    function crearArbolHTML(arbolCompleto, idElementoPadre) {
      for (var m = 0; m < arbolCompleto.length; m++) {
        document
          .getElementById(idElementoPadre)
          .appendChild(crearElementoHTML(arbolCompleto[m]));
      }
    }
    crearArbolHTML(modalesMapa, "divDePrueba");
  </script>

1
  • 4
    Hola! No he trabajado con archivos json, pero gracias por el dato, lo voy a tener en cuenta para futuras consultas, has sido muy amable!
    – LauraZ
    Commented el 4 jun. 2019 a las 17:03

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.