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

Question

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

我知道有很多类似问题的问题，但这些问题不包含我正在寻找的答案。我知道 html 中的 css 是不正确的，但我正在做一些快速原型设计，所以请原谅我。

代码

打开模态链接

<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。

Answer 2

TLDR;

您似乎需要在您的模态中使用modal-dialog div，.modal('hide') 或 data-dismiss="modal" 才能工作。

--

我通过将 body-modal 类更改为 modal-dialog 解决了您的问题。 （并将关闭图标更改为红色，以便在 sn-p 中更容易看到它）

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

function closeModal() {

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

};

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

<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: red; top: 40px; cursor: pointer; z-index: 1700;" onClick="closeModal()">close</i>
  <div class="modal-dialog" 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>

但现在模态有点混乱（视觉上）。

我建议您查看modal docs。使用 Bootstrap 4 中包含的功能，您可能会剥离大部分额外（内联）CSS 和 JS，从而确保您的一切在大多数浏览器中都能正常运行。

Answer 3

您可以使用 data-dismiss="modal" 关闭模式

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