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' ?>

我只是想，如果我必须为大约100张图片设置HTML，那么在一个文档中会有很多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图像时，它将触发模态。单击模态中的.close元素时，将关闭模态。

包括外部模态html文档

1 个答案: