为啥我不能在使用多个模式时关闭模式？

Posted 2023-03-05

【中文标题】为啥我不能在使用多个模式时关闭模式？

【英文标题】：Why can't I close modals when using more than one?为什么我不能在使用多个模式时关闭模式？

【发布时间】：2018-06-05 07:59:00

【问题描述】：

我目前正在尝试在 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 需要 jQuery (getbootstrap.com/docs/4.0/getting-started/introduction/#js) 时使用原生 javascript 函数似乎很奇怪；感觉就像你在这里与框架作斗争。

【参考方案1】：

实现该图库功能的最简单方法是使用 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" />
        </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" />
        </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" />
        </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.js 和 jQuery 提供的功能，并且想提出一个纯 JavaScript 自定义解决方案，您绝对不应该在每个缩略图上重复相同的代码。我假设您正在尝试这样做，并且当您在代码中使用全局变量时，它们会被覆盖。相反，您应该处理模态功能并以更通用的方式附加事件处理程序。我不建议采用这种方法，但为了方便起见，这里是一个纯 javascript 的示例。

// Basic Modal object
var Modal = function() 
    var modal = document.getElementById('gallery-modal'),
        title = modal.querySelector('.modal-title'),
        img = modal.querySelector('.img-placeholder'),
        closeBtns = modal.querySelectorAll('[data-dismiss="modal"]'),
        bodyClassList = document.querySelector('body').classList;

    function show(title, src) 
        title.innerText = title;
        img.src = src;

        bodyClassList.add('modal-open');
        modal.style.display = 'block';
    

    function hide() 
        bodyClassList.remove('modal-open');
        modal.style.display = 'none';

        title.innerText = '';
        img.src = '';
    

    // Handling `click` on "close" buttons
    [...closeBtns].forEach(closeBtn => 
        closeBtn.addEventListener('click', hide);
    );

    return 
        show : show,
    ;
();

// Handling `click` events on thumbnails
[...document.querySelectorAll('#gallery .img-thumbnail')].forEach(thumbnail => 
    thumbnail.addEventListener('click', function() 
        // `this` is the <img> clicked
        var title = this.alt,
            src = this.src;

        // Modal is the global Modal object
        Modal.show(title, 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" />
        </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" />
        </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" />
        </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"/>

【参考方案2】：

当前与

的冲突

<div class="modal-backdrop fade show"></div>

之后你可以尝试使用 css

body.modal-open .modal
    z-index: 0;

body.modal-open .modal.fade.show
    z-index: 1041;