には外部モーダルのhtmlドキュメントが含まれています

Question

私はブートストラップのモーダルと一緒に作らなければならない写真がかなりあります。 JSと一緒に機能していますが、コードを最適化したいと思います。これが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は、私は、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' ?> 

私はちょうど私が約100絵のためのHTMLを設定する必要がある場合、一つの文書でのHTMLコードのロットたくさんあることつもりがあることを、考えています。各写真には6行のコードが必要です。

Answer 1

ModaliseJSを使用できますが、これはあなたのニーズに合っているようです。頭で

：

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

モーダルは、単に追加し、あなたのapp.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> 

（ちょうどインラインJSを削除）の変更を必要としません：

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

処理は自動です。#courseImageイメージをクリックすると、それがトリガーされますモーダル。モーダルに.close要素をクリックすると、モーダルが閉じます。