У меня есть следующий код, чтобы показывать модальные окна, которые я хочу использовать в моем проекте.
Нет ни у какой проблемы, только, что я должен включать более 40 манер, это способствует тому, чтобы мой файл превзошел три тысячи линий.
Это основные манеры Bootstrap 3, повторяют n разы как код манер, так и код этикеток <a>
что открывают их, единственное, что они меняют, - идентификации или href и внутренний контент каждого модального.
<!--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>
То, что я хочу, состоит в том, чтобы отлаживать этот код, чтобы избегать повторять код так, что главным образом тот же самый.
У меня есть несколько идей, первое состоит в том, чтобы использовать php с двумя includes кода, который повторяется, немного как это более или менее.
/* 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'; ?>
Я не думаю, что очень практический этот метод ни очень ортодоксально.
Он мог бы делать это также с Javascript, но я не уверена, если он смог включать весь код html в inner, нечто похожее:
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">";
В точку, что я хочу прибыть, он состоит в том, что я не хочу изобрести колесо заново, если уже существует функция или параметр, который позволял бы мне автоматизировать этот copy/paste и предотвращать повторение кода, я был бы совершенным.
Большое спасибо!