包含外部模態html文件

我有很多圖片必須與bootstrap模態一起製作。與JS一起工作的功能現在正常，但我想優化代碼。這是HTML代碼。包含外部模態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' ?>

我只是想，如果我必須設置爲100左右畫面的HTML，有要去的HTML代碼有很多很多的一個文件內。每張照片需要6行代碼。

來源

2016-10-25 Ne Kr

對於模式..您可以移動到emodal.js或bootbox.js http://saribe.github.io/eModal/#demo http://bootboxjs.com/examples.html –

您可以使用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圖片時，它會觸發第電子模式。當點擊.close元素進入你的模態時，會關閉模態。

來源

2016-10-28 07:24:26

包含外部模態html文件

回答

相關問題