Bootstrap 4：使用多个时无法关闭模态

Posted 2021-04-27

我目前正在尝试在Bootstrap 4中设置一个库。现在我想让图像可以点击并打开它的更大版本。这工作正常但是一旦我使用多个脚本它就不会让我关闭模态了。

到目前为止，这是我的代码：

<div id="Modal01" class="modal">
   <span class="close">&times;</span>
   <img class="modal-content" id="img01">
 </div>
  <div class="col-md-3">
    <div class="thumbnail">
        <img id="TheImage" src="/img/galleryimg1.png">
    </div>
  </div>

JS：

<script>
  var modal = document.getElementById('Modal01');

  var img = document.getElementById('TheImage');
  var modalImg = document.getElementById("img01");
  img.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerhtml = this.alt;
  }
  var span = document.getElementsByClassName("close")[0];
  span.onclick = function() {
    modal.style.display = "none";
  }
</script>

希望你们能帮助我。

答案

实现该库功能的最简单方法是使用Bootstrap提供的javascript库。有了它，您的标记和脚本可以像下面的示例一样简单。您可以在Bootstrap文档的Varying modal content部分下阅读有关此设置的更多信息。

$('#gallery-modal').on('show.bs.modal', function(event) {
    var thumbnail = event.relatedTarget,
        title = thumbnail.alt,
        src = thumbnail.src,
        modal = $(this);

    modal.find('.modal-title').text(title);
    modal.find('.img-placeholder').attr('src', src);
});

<div id="gallery" class="container">
    <div class="row">
        <div class="col-4">
            <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/ff0000/ffffff?text=Image+1" alt="Image 1"/>
        </div>
        <div class="col-4">
            <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/00ff00/ffffff?text=Image+2" alt="Image 2"/>
        </div>
        <div class="col-4">
            <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/0000ff/ffffff?text=Image+3" alt="Image 3"/>
        </div>
    </div>
</div>

<div id="gallery-modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="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 class="img-placeholder img-fluid" src=""/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

以上是关于Bootstrap 4：使用多个时无法关闭模态的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 4 模态在隐藏时未正确关闭

使用css或js关闭时如何向右滑动bootstrap 4模态对话框

Bootstrap 显示多个模态框（modal）

python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件

Bootstrap 4 - 避免屏幕点击的模式关闭

如果第二次，Bootstrap Modal 按钮关闭无法关闭