gehören externe modal HTML-Dokument

Question

Ich habe ziemlich viele Bilder, die ich zusammen mit einem Bootstrap-Modal machen muss. Die Funktion zusammen mit JS funktioniert jetzt gut, aber ich möchte den Code optimieren. Dies ist der HTML-Code.

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> 

Gibt es nicht eine Möglichkeit, wo ich einige der HTML enthalten kann. Ich habe versucht, so zu tun, aber das funktioniert nicht.

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

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

Ich denke nur, dass, wenn ich für rund 100 Bilder, die HTML gesetzt haben, gibt werde viel viel von HTML-Code in einem Dokument sein soll. Jedes Bild würde 6 Zeilen Code benötigen.

Answer 1

Sie können ModaliseJS verwenden, die Ihrem Bedarf zu entsprechen scheint.

Im Kopf:

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

Die modale keine Änderung erfordert (nur die Inline JS entfernen)

<!-- 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> 

In Ihrem app.js Datei, fügen Sie einfach:

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

Die handling ist automatisch, wenn Sie auf das #courseImage Bild klicken, wird es th auslösen e modal. Wenn Sie auf das .close Element in Ihrem Modal klicken, wird das Modal geschlossen.