Question

我正在创建一个非常简单，但有点调整，用于显示iFrame的模态。我通过javascript函数和bootstrap提供的模态调用函数打开模型。在我的模态中，我放置了一个用于关闭模态的图标。如果我点击这个关闭图标，模态就不会隐藏。我使用javascript onclick与bootstrap提供的.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

如果删除fade类，则可以正常使用。

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

Answer 2

TLDR;

您似乎需要printnum(180)或modal-dialog模式中的.modal('hide') div才能正常工作。

-

我通过将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');

};

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

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

Answer 3

你可以使用data-dismiss =＆＃34; modal＆＃34;关闭模态

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

Bootstrap 4 .modal（＆＃39; hide＆＃39;）无效

3 个答案:

TLDR;

-