Bootstrap 4 .modal('hide')不起作用

Question

我正在创建一个非常简单,但有点调整,用于显示iFrame的模态.我通过javascript函数和bootstrap提供的模态调用函数打开模型.在我的模态中,我放置了一个用于关闭模态的图标.如果我点击这个关闭图标,模态将不会隐藏.我使用的onclick与一个JavaScript .modal('show')并.modal('hide')通过引导提供的功能.模态不会隐藏,但我的控制台日志被触发.

我知道有很多问题都有类似的问题,但这些问题并没有包含我正在寻找的答案.我知道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

TLDR；

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

——

我通过将body-modal类更改为modal-dialog. （并将关闭图标更改为红色，以便在代码段中更容易看到）

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>

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

我建议您检查模态文档。使用 Bootstrap 4 中包含的功能，您可能会去除大部分额外的（内联）CSS 和 JS，并以这种方式确保您的一切都在大多数浏览器中运行良好。

Answer 2

如果删除fade该类，则效果很好。

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