javascript - Bootstrap 4 .modal ('hide' ) 不工作

Question

我正在创建一个非常简单但稍作调整的模式来显示 iFrame。我通过 javascript 函数和 bootstrap 提供的模态调用函数打开模型。在我的模式中，我放置了一个用于关闭模式的图标。如果我单击此关闭图标，模态将不会隐藏。我将 javascript onclick 与 Bootstrap 提供的 .modal('show') 和 .modal('hide') 函数一起使用。模态没有隐藏，但我的控制台日志被触发了。

我知道有很多类似的问题，但这些问题没有包含我正在寻找的答案。我知道 html 中的 css 是不对的，但我正在做一些快速原型(prototype)制作所以请原谅我。

代码

打开模态链接

<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

模态 html

<!-- Modal -->
<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">

  <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" onClick="closeModal()"></i>

  <div class="body-modal" style="max-width: 90%; margin: 0 auto; overflow: scroll;">

    <div id="clip" style="overflow:scroll;">
        <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
    </div>

  </div>  

</div>

JS

function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};

我的主要问题是我的模态显示了，同时触发了显示和隐藏的 console.log 但是在点击关闭按钮后模态没有隐藏。

Answer 1

如果您删除 fade 类，它会正常工作。

如果您打算使用 fade 类，我认为您需要一个 modal-dialog div。此外，只使用一种类型的关闭/打开模式，js 方式或 data-toggle/data-dismiss。