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!