Как реализовать модальные изображения в Bootstrap?

Я делаю галерею изображений с сортировщиком, который использует модальные изображения Bootstrap. Я следил за модальной документацией, однако вместо кнопки я использую изображение

Я скопировал модальную форму из документации и при необходимости заменил ее. Я тестировал его в нескольких браузерах, и все они не работают.

      <div class = "row">
        <div class = "column abstract">
          <div class = "content">
            <img src = "https://via.placeholder.com/150" alt = "" style = "width:100%" data-toggle = "modal" data-target"#abstractModalOne">
            <div class = "modal fade" id = "abstractModalOne" tabindex = "-1" role = "dialog" aria-labelledby = "abstractModalOneLabel" aria-hidden = "true">
              <div class = "modal-dialog" role = "img">
                <div class = "modal-content">
                  <div class = "modal-header">
                    <h5 class = "modal-title" id = "abstractModalOneLabel">Sea Lions</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 = "https://via.placeholder.com/700" alt = "">
                  </div>
                  <div class = "modal-footer">
                    <button class = "btn btn-default" data-dismiss = "modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

После нажатия на маленькое изображение должно открыться более крупное изображение на той же вкладке.

html bootstrap-modal

22.12.2018 06:13

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

194

Ответы 1

Я не уверен, что мой ответ идеально подходит для вас, но он действительно поможет вам понять логику.

вот модальный HTML

<div class = "container">
  <div class = "row">
    <div class = "row">

                <div class = "col-12 col-md-4 col-sm-6">
                    <a title = "Image 1" href = "#"> 
                        <img class = "thumbnail img-responsive" id = "image-1" src = "http://dummyimage.com/600x350/ccc/969696&amp;text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
                    </a>
                </div>

                <div class = "col-12 col-md-4 col-sm-6">
                    <a title = "Image 2" href = "#"> 
                        <img class = "thumbnail img-responsive" id = "image-2" src = "http://dummyimage.com/600x350/2255EE/969696&amp;text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
                    </a>

                </div>
                <div class = "col-12 col-md-4 col-sm-6">
                    <a title = "Image 3" href = "#"> 
                        <img class = "thumbnail img-responsive" id = "image-3" src = "http://dummyimage.com/600x350/449955/FFF&amp;text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
                    </a>
                </div>
    </div>

    <hr>

  </div>
</div>

    <div class = "hidden" id = "img-repo">

        <!-- #image-1 -->
        <div class = "item" id = "image-1">
            <img class = "thumbnail img-responsive" title = "Image 11" src = "http://dummyimage.com/600x350/ccc/969696">
        </div>
        <div class = "item" id = "image-1">
            <img class = "thumbnail img-responsive" title = "Image 12" src = "http://dummyimage.com/600x600/ccc/969696">
        </div>
        <div class = "item" id = "image-1">
            <img class = "thumbnail img-responsive" title = "Image 13" src = "http://dummyimage.com/300x300/ccc/969696">
        </div>

        <!-- #image-2 -->
        <div class = "item" id = "image-2">
            <img class = "thumbnail img-responsive" title = "Image 21" src = "http://dummyimage.com/600x350/2255EE/969696">
        </div>
        <div class = "item" id = "image-2">
            <img class = "thumbnail img-responsive" title = "Image 21" src = "http://dummyimage.com/600x600/2255EE/969696">
        </div>
        <div class = "item" id = "image-2">
            <img class = "thumbnail img-responsive" title = "Image 23" src = "http://dummyimage.com/300x300/2255EE/969696">
        </div>   

        <!-- #image-3-->
        <div class = "item" id = "image-3">
            <img class = "thumbnail img-responsive" title = "Image 31" src = "http://dummyimage.com/600x350/449955/FFF">
        </div>
        <div class = "item" id = "image-3">
            <img class = "thumbnail img-responsive" title = "Image 32" src = "http://dummyimage.com/600x600/449955/FFF">
        </div>
        <div class = "item" id = "image-3">
            <img class = "thumbnail img-responsive" title = "Image 33" src = "http://dummyimage.com/300x300/449955/FFF">
        </div>        

    </div>

<div class = "modal" id = "modal-gallery" role = "dialog">
  <div class = "modal-dialog">
    <div class = "modal-content">
      <div class = "modal-header">
          <button class = "close" type = "button" data-dismiss = "modal">×</button>
          <h3 class = "modal-title"></h3>
      </div>
      <div class = "modal-body">
          <div id = "modal-carousel" class = "carousel">

            <div class = "carousel-inner">           
            </div>

            <a class = "carousel-control left" href = "#modal-carousel" data-slide = "prev"><i class = "glyphicon glyphicon-chevron-left"></i></a>
            <a class = "carousel-control right" href = "#modal-carousel" data-slide = "next"><i class = "glyphicon glyphicon-chevron-right"></i></a>

          </div>
      </div>
      <div class = "modal-footer">
          <button class = "btn btn-default" data-dismiss = "modal">Close</button>
      </div>
    </div>
  </div>
</div>

Модальный CSS

.thumbnail {margin-bottom:6px;}

.carousel-control.left,.carousel-control.right{
  background-image:none;
  margin-top:10%;
  width:5%;
}

Модальный Js: -

$(document).ready(function() {

   /* activate the carousel */
   $("#modal-carousel").carousel({interval:false});

   /* change modal title when slide changes */
   $("#modal-carousel").on("slid.bs.carousel",       function () {
        $(".modal-title")
        .html($(this)
        .find(".active img")
        .attr("title"));
   });

   /* when clicking a thumbnail */
   $(".row .thumbnail").click(function(){
    var content = $(".carousel-inner");
    var title = $(".modal-title");

    content.empty();  
    title.empty();

    var id = this.id;  
     var repo = $("#img-repo .item");
     var repoCopy = repo.filter("#" + id).clone();
     var active = repoCopy.first();

    active.addClass("active");
    title.html(active.find("img").attr("title"));
    content.append(repoCopy);

    // show the modal
    $("#modal-gallery").modal("show");
  });

});

Пример и справочный код - здесь.

Надеюсь, это вам поможет ..

Есть ли способ реализовать это без карусели? И я вижу, что пример, который вы связали, предназначен для начальной загрузки 3, а я использую бутстрап 4.

— 23.12.2018 01:11

см. этот модальный пример w3 School w3schools.com/howto/howto_css_modal_images.asp, может быть, он вам поможет. @sadrobotman

— 24.12.2018 05:39

22.12.2018 07:08