我无法正确弹出模式对话框

Question

我正在使用图像作为缩略图创建模式弹出窗口。单击图像后，模态背景与图像的大小不符，并且模态的页眉和页脚不显示。

我在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文件加载到Web浏览器中时，它可以正确加载。模态弹出窗口应符合其中任何大小的图像；我使用了一个700x700的图片，它超出了模式窗口的范围。页眉和页脚也应正确显示，其中页眉是图像的标题，并且页脚具有关闭按钮和图像上的简短标题。