включают внешний модальный html-документ

Question

У меня есть довольно много фотографий, которые мне нужно сделать вместе с модулем bootstrap. Теперь функция вместе с JS работает нормально, но я бы хотел оптимизировать код. Это HTML-код.

HTML

<img id="courseImage" src="/images/thumbs/image1.jpg" alt="Trolltunga, Norway" width="300" height="200"> 
<!-- The Modal --> 
    <div id="courseModal" class="modal"> 

     <!-- The Close Button --> 
      <span class="close" onclick="document.getElementById('courseModal').style.display='none'">&times;</span> 

      <!-- Modal Content (The Image) --> 
      <img class="modal-content" id="img01"> 

      <!-- Modal Caption (Image Text) --> 
      <div id="caption"></div> 
    </div> 

Есть не способ, где я могу включить некоторые HTML. Я пытался это сделать, но это не работает.

<img id="courseImage" src="/images/thumbs/image1.jpg" alt="Trolltunga, Norway" width="300" height="200"> 

<?php include $_SERVER['DOCUMENT_ROOT'] . '/resources/includes/courseModal.html' ?> 

Я просто думаю, что если я должен установить HTML для около 100 картин, там собирается быть много много HTML кода в одном документе. Каждое изображение будет иметь 6 строк кода.

Answer 1

Вы можете использовать ModaliseJS, что, по-видимому, соответствует вашим потребностям.

В голове:

<script src="js/modalise.js" type="text/javascript"> 

Модальное не требует модификации (только удалить встроенный JS)

<!-- The Modal --> 
<div id="courseModal" class="modal"> 

    <!-- The Close Button --> 
     <span class="close"></span> 

     <!-- Modal Content (The Image) --> 
     <img class="modal-content" id="img01"> 

     <!-- Modal Caption (Image Text) --> 
     <div id="caption"></div> 
</div> 

В файле app.js, просто добавьте:

var myModal = new Modalise('courseModal', { 
     btnsOpen : [document.getElementById('courseImage')] 
    }).attach(); 

обработка выполняется автоматически, когда вы нажмете на изображение #courseImage, это вызовет e модальный. Когда вы нажимаете на элемент .close в свой модальный, вы закрываете модальный.