Twitter Bootstrap 4 模态框不会在 Chrome 中显示答案

【问题标题】：Twitter Bootstrap 4 modal box won't show in ChromeTwitter Bootstrap 4 模态框不会在 Chrome 中显示
【发布时间】：2020-05-02 20:01:04
【问题描述】：

嗯，最近发现了一些奇怪的活动：我有一个 Bootstrap 3 模态框，它通过数据属性激活。这是我的 HTML：

<li data-toggle="modal" data-target="#modalImage" class="quickview" data-img-src="<IMG SRC by Laravel Blade>">
   <img src="<IMG SRC by Laravel Blade>" alt="<IMG ALT by Laravel Blade>">
</li>

还有模态框本身：

<!--modal-image-->
<div class="modal fade" id="modalImage" tabindex="-1" role="dialog" aria-labelledby="modalImage" role="dialog"
     aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content" style="background-color:rgba(255,255,255,.8)!important">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body text-center">
                <img class="modal_image" src="" />
            </div>
        </div>
    </div>
</div>

这是我的 JavaScript（我使用它是因为此模式用于在点击时打开更大的图像，并且图像位于图片库 (bxSlider) 内）：

/* Open Modal box for larger image; */
$(".quickview").on("click", function() {
    var $this = $(this);
    var imgSrc = $this.data("img-src");
    $(".modal-body > img.modal_image").attr("src", imgSrc);
    $('#modalImage').modal('show');
});

问题（以及奇怪之处）在于它适用于我测试的所有浏览器，但 Chrome 除外。它甚至适用于 IE 和 Edge（基于 Chromium）。在 Chrome 中没有任何反应，没有控制台错误消息，什么都没有。

有什么想法吗？

附：是的 - 我的 JS 用 $(document).ready 包裹，所以它只在页面加载时执行

【问题讨论】：

我已经使用 Bootstrap 4.2.1 在 Chrome 中进行了检查，它工作正常。清除缓存和历史记录，然后尝试。您也可以使用 window.onload 进行检查。
@WebchipEnterprise，已清除缓存和历史记录。但是在使用 Chrome 隐身模式（也禁用缓存）时，这个问题也仍然存在。我有 Bootstrap 4.1.13。顺便说一句，将 $('#modalImage').modal('show'); 放在 Chrome 的控制台中会启动空模式框

标签： javascript twitter-bootstrap google-chrome bootstrap-modal

【解决方案1】：

似乎最新的 chrome 使用最新版本在 Chrominium 上分解了模态显示。我也有同样的问题。

【讨论】：