使用引导程序为图像添加常规模态

Question

我需要创建一个“灯箱”。我分两个步骤解决此问题，以便我可以更好地理解它并了解发生了什么，而不仅仅是在线复制代码。首先，我想为屏幕上的图像创建模态。在线上有关创建模态的大多数教程都使用按钮来触发它，但我非常需要只使用图片。创建模态后，我将在模态主体中加入一个轮播。

我已经尝试复制很多代码，但是没有一个对我有用。一个看似似乎可行的样子，我单击图像后模态就存在了，但没有显示。当我按一下检查时，我在网页的一侧看到了模式及其所有内容，好像它以前是隐藏的，但现在已经出现了。显然，它不是居中的，但我不知道该使用哪个类来居中该div。

这是我要在其中放置模态的代码：

  <div class="box three">
          <section class="utopia-box">
            <a data-toggle="modal" id="image-modal" href="#myModal" class="">
            <img src="public/utopia/buildutopia.png" alt="cover">
          </a>
          </section>
          <section class="china-box">
            <img src="public/derivaschina/towercover.png" alt="viewofcity" data-toggle="modal" data-target="">
          </section>

              <section class="map-box">
                <img src="public/geodesign/geodesignmap.png" alt="map">
              </section>

            </div>

我需要为所有三个部分/图像复制一个灯箱转盘。就像我说的，我只想从一个模态开始，但欢迎所有建议。

Answer 1

您提到使用Bootstrap，因此您可以将内容文本放在模态主体内，例如：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="box three">
          <section class="utopia-box">
            <a data-toggle="modal" id="image-modal" href="#myModal" class="">
              <img src="public/utopia/buildutopia.png" alt="cover">
            </a>
          </section>
          <section class="china-box">
            <img src="public/derivaschina/towercover.png" alt="viewofcity" data-toggle="modal" data-target="">
          </section>

          <section class="map-box">
            <img src="public/geodesign/geodesignmap.png" alt="map">
          </section>

        </div>
      </div>
    </div>
  </div>
</div>

这至少会为您提供所需内容的工作模式。这是一个有效的example注意：这只是演示模式打开和关闭，而不是完整的轮播，但BS也具有those之一。您还应该看看文档：https://getbootstrap.com/docs/4.2/components/modal/