У меня проблемы с тем, чтобы мой модал выскочил правильно - PullRequest
Новая
       5

У меня проблемы с тем, чтобы мой модал выскочил правильно

0 голосов
/ 24 декабря 2018

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

Я нашел следующий код в bootsnippet и после некоторых проб и ошибокЯ получил модальное всплывающее окно, однако заголовок и нижний колонтитул не загружаются.Первоначальный автор кода сделал галерею, позволяющую переходить к другим изображениям, но я не хотел реализовывать эту часть.

$(document).ready(function() {
  loadGallery(true, 'a.thumbnail');

  function disableButtons(counter_max, counter_current) {
    $('#show-previous-image, #show-next-image').show();
    
    if (counter_max == counter_current) {
      $('#show-next-image').hide();
    } else if (counter_current == 1) {
      $('#show-previous-image').hide();
    }
  }

  function loadGallery(setIDs, setClickAttr) {
    var current_image,
        selector,
        counter = 0;

    $('#show-next-image, #show-previous-image').click(function() {
      if ($(this).attr('id') == 'show-previous-image') {
        current_image--;
      } else {
        current_image++;
      }

      selector = $('[data-image-id="' + current_image + '"]');
      updateGallery(selector);
    });

    function updateGallery(selector) {
      var $sel = selector;
      current_image = $sel.data('image-id');
      $('#image-gallery-caption').text($sel.data('caption'));
      $('#image-gallery-title').text($sel.data('title'));
      $('#image-gallery-image').attr('src', $sel.data('image'));
      disableButtons(counter, $sel.data('image-id'));
    }

    if (setIDs == true) {
      $('[data-image-id]').each(function() {
        counter++;
        $(this).attr('data-image-id', counter);
      });
    }
    
    $(setClickAttr).on('click', function() {
      updateGallery($(this));
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

<section id="gallery" class="content-section text-center">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <button class="btn btn-default" onclick="filterSelection('all')">Show all</button>
        <button class="btn btn-default active" onclick="filterSelection('abstract')">Abstract</button>
      </div>
      <!-- Portfolio Gallery Grid -->
      <div class="row">
        <div class="column abstract">
          <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Placeholder" data-caption="Temporary" data-image="https://via.placeholder.com/700" data-target="#image-gallery">
              <img class="img-responsive" src="https://via.placeholder.com/150" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="image-gallery-title"></h4>
        </div>
        <div class="modal-body">
          <img id="image-gallery-image" class="img-responsive" src="">
        </div>
        <div class="modal-footer">
          <div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
        </div>
      </div>
    </div>
  </div>
</section>

После тестирования с помощью jsfiddle он загружается неправильно, что странно, так как загружается правильно, когда я загружаю html-файл в веб-браузер.Модальное всплывающее окно должно соответствовать изображению любого размера;Я использовал изображение 700x700, и оно простирается за модальное окно.Верхний и нижний колонтитулы также должны отображаться правильно, причем верхний колонтитул является заголовком изображения, а нижний колонтитул имеет кнопку закрытия и краткую подпись к изображению.

...