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

Posted 2023-02-22

【中文标题】Bootstrap 4 .modal(\'hide\') 不工作

【英文标题】：Bootstrap 4 .modal('hide') not workingBootstrap 4 .modal('hide') 不工作

【发布时间】：2018-07-17 16:03:28

【问题描述】：

我正在创建一个非常简单但稍加调整的模式来显示 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，但是在单击关闭按钮后，模态不会隐藏。

【问题讨论】：

您在控制台中看到了什么吗？也许您遇到了错误。

@FedericoNavarrete 就像我说的，我的 console.log 两次都被触发了，所以我会注意到是否有错误。看不到任何问题或错误。

您是否尝试过在 jquery 中使用匿名函数而不是使用点击事件？ $('.close-modal').on('click'....也是如此。

【参考方案1】：

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

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

【讨论】：

其实我喜欢fade 类，并且发现它只适用于modal-dialog 类。但问题是我实际上是故意删除了 modal-dialog 类。这就是为什么我要问为什么这也不起作用。

【参考方案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，从而确保您的一切在大多数浏览器中都能正常运行。

【讨论】：

好吧，我想通了。我知道 modal-dialog 类，但我确实在 purepose 上删除了该类，以实现我最初的目标。这就是为什么我的问题是为什么这不起作用，实际上没有 modal-dialog 类。由于某些原因，我已经调整了模态，还因为文档对我的目标不够清楚（在模态中滚动）。然而，我认为您的答案与回答问题一样接近，所以谢谢！我进行了一些修改以帮助用户获得良好的答案。

@Gijsberts 你看过this关于在模态中滚动的内容吗？

【参考方案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>