Добавьте обычный модал для изображения с помощью Bootstrap

Question

Мне нужно создать «лайтбокс». Я подхожу к этой проблеме в два этапа, чтобы лучше понять ее и понять, что происходит, вместо того, чтобы просто копировать код в Интернете. Во-первых, я хочу создать модал для изображения, которое у меня есть на экране. Большинство онлайн-уроков, посвященных созданию модальных моделей, используют кнопку для ее запуска, но мне крайне необходимо использовать только картинку. Создав модал, я включу карусель в тело модала.

Я пытался скопировать много кода, но ни один из них не помог мне. Один из них, казалось бы, работал, модал существовал после того, как я нажал на изображение, но он не отображался. Когда я нажал «осмотреть», я увидел модал и все его содержимое на боковой стороне веб-страницы, как будто он прятался раньше, но теперь появился. Очевидно, это был не центр, но я не знал, какой класс использовать для центрирования этого деления.

Это код, в котором я хочу разместить модал:

  <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, поэтому ваше модальное тело будет просто изображением (и всем, что вы хотели показать, теоретически). И для каждой кнопки вы будете передавать URL-адрес изображения, по которому щелкнули, с помощью data атрибутов, таких как:

<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">
        <img src=""/>
      </div>
    </div>
  </div>
</div>

И для каждой кнопки вы будете передавать URL-адрес изображения, по которому щелкаете, с помощью data атрибутов. например:

<a href="#" data-toggle="modal" data-target="#myModal" data-image-url="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
</a>

По крайней мере, вы получите рабочий модал с нужным вам контентом. Вот рабочий пример ПРИМЕЧАНИЕ: это просто демонстрирует модальное открытие и закрытие, а не полную карусель, но у BS есть также одна из тех . Вам также следует ознакомиться с документами: https://getbootstrap.com/docs/4.2/components/modal/