引导关闭模式不起作用答案

【问题标题】：Bootstrap close modal not working引导关闭模式不起作用
【发布时间】：2016-07-23 02:47:54
【问题描述】：

我这里有两个按钮用于关闭模式。第一个是关闭图标，另一个是取消按钮，都使用 data-dismiss 来关闭模式。但是，它们都不起作用。我对另一个模态使用相同的代码，它们工作正常。有什么猜测吗？

<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
    <div class="modal-dialog">
        <div id="timeSelectModalContent" class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <label>
                <input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
                <label class="checkbox-label">Thursday, 08:00 pm.</label>
            </label>
            <br>
            <label>
                <input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
                <label class="checkbox-label">Thursday, 09:30 pm.</label>
            </label>
            <div id="time-modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

这是旧的，但您是否尝试删除`style="display: none"`？事实证明，使用它而不是 Bootstrap 的类/方法来显示和隐藏可能会导致事情崩溃。
这个线程很旧，但是当我遇到这个问题时，问题就是将 z-index 赋予 "X" 按钮。

标签： javascript html modal-dialog bootstrap-modal

【解决方案1】：

删除“fade”类。

&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;

改成

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

淡入淡出是一种效果，如果你去掉淡入淡出，你的模态将没有淡入淡出效果。导致这个问题的几个问题是没有用正确的方法调用模态。

方法错误：$("#myModal").show();

正确方法：$("#myModal").modal('show');

【讨论】：

就是这样！在对 html 和 jQuery 进行了数小时的调整后，它最终成为了导致问题的这个类！
它也适用于我，但我不明白为什么它不能与淡入淡出类一起使用，将 inisde 放在 div 中。 fade 只是给了一个过渡效果吧？

【解决方案2】：

我也被困了一段时间。我不知道为什么，但是当我使用data-bs-dismiss 而不是 data-dismiss 类中的关闭按钮，它对我有用。

请参阅下面的关闭按钮的完整代码。

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

【讨论】：

我认为您的意思是粘贴一些代码，而不仅仅是 Close :)
这对我有用！按钮的代码应该是：<button id='closeModal' type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
谢谢...忘了，BS5需要'bs-'
谢谢，为我工作，
也为我工作。我们应该为数据保存做同样的事情吗？改成data-bs-save？

【解决方案3】：

非常老的话题，但对于搜索此问题的人来说，它仍然首先出现，可能是由于他们犯了与我一样的简单错误，即未能确保模态 div 位于启动它的主体 div 之外.以 Material Kit 为例，您应该仔细检查目标“#myModal” div 是否位于主容器的结束 div 标记之外。

<div class="main main-raised">
    <div class="container">
    <!--                 modals -->
        <div class="row" id="modals">
            <div class="col-md-6">
                <button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal">
                    Classic modal
                </button>
            </div>

        </div>
    <!--                 end modals              -->
    </div>
</div>

<!-- Classic Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">clear</i>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Hey hey</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-simple">Nice Button</button>
                <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--  End Modal -->

【讨论】：

谢谢...谢谢...谢谢。这让我发疯了好几个星期。但是，有没有办法将模式包含在要部署的“内容容器”中？我在页面顶部的“menus1.html” 和“menus2.html”以及每个“containerPage.html”include menus1.html 和页面底部的include menus2.html 中破坏了我的页面，所以我的所有菜单/dropdowns，页眉在两个 menus1/2 页面中包含一次 - 使我的网站管理更容易 1000 倍 - 直到遇到上述模式问题。
我尝试了几种不同的方法来完全满足您的需求，但不幸的是，它无法正常工作。不过，我并不完全是专家，所以我的失败可能不应该被视为无法完成的标志。
是的，我也没有运气。我将自定义 z-index 应用于实际模态，使其大于使整个页面变灰的 z-index - 但这不起作用。

【解决方案4】：

首先检查您是否在 html 中正确包含 bootstrap.js 文件。

您可以尝试此代码并将关闭模式的按钮标记替换为 -

<a href="#" class="close" data-dismiss="modal" aria-label="close">&times;</a>

如果还是不行，请告诉我！

您可以在 jQuery 中添加关闭按钮的点击事件。像这样-

$("#yourModal").modal("hide");

【讨论】：

没用。我在同一个 html 文件的另一个模式中使用相同的两个按钮，它们工作正常，所以它肯定包含在内。我只是想知道它是否与我的模态定义有关。
看看现在你可以用 JavaScript 进行模态关闭
我当然可以。但使用这种方法的全部意义在于不使用诸如侦听器之类的 js 代码。
不知道为什么，但是当我通过.modal("show") 打开我的模态时，data-dismiss="modal" 不足以关闭模态，所以我必须$("#mymodal .close").click(function(){$("#mymodal").hide();});

【解决方案5】：

对我的情况有什么帮助，我已经用 data-bs-dismiss 替换了 data-dismiss，现在它可以工作了！

【讨论】：

【解决方案6】：

引导程序 5 问题摘要

嗨。像其他人一样，这让我绊倒了。这个线程已经跨越了很长一段时间，当然还有其他问题导致了这个问题。但是，正如Alexandre Elshobokshy 无意中提到的那样，正在改变

data-bs-dismiss

而不是

data-dismiss

有效。我想指出这一点，因为它是正确的，但是需要更新其他键才能使 Modals 与 Bootstrap 和 HTML 5 一起使用。

HTML5 更改了 Bootstrap 所需的标签。一种是data-bs-dismiss。

其他人是：

data-bs-toggle & data-bs-target

我希望这对其他人有帮助！

【讨论】：

【解决方案7】：

这是我的模态实现，您可以使用它进行比较，以帮助解决模态代码中存在的错误。

<html lang="en">
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click Here</h2>
<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

【讨论】：

使用这个
如果还是不行就用这个$('button[data-dismiss="modal"]').click(function(){ $(this).parent().parent().parent().parent().modal('hide'); })
赞成，我没有注意到其余代码是否有效，但是包含的 css 和 js 文件解决了我的问题，因为我缺少 jquery 文件。
@echology 请对此答案投赞成票，以便此答案对其他人有所帮助
@Mr.HK 我已经投票了。如果您之前注意到计数器是 -1，那么在我的投票中，它现在是 0。我想比 -1 好 :-)

【解决方案8】：

始终尝试将模态框的 HTML 代码放在文档的顶级位置，以避免其他组件影响模态框的外观和/或功能。

【讨论】：

【解决方案9】：

为模型的关闭按钮提供 ID 'modalClose' 并将“myView”标识到您的模型，

然后使用以下代码：

    <script>
    $(function () {
        $('#modalClose').on('click', function () {
            $('#myView').hide();
        })
    })

</script>

它会像魅力一样发挥作用。

【讨论】：

最好使用modal('hide') 而不是hide()

【解决方案10】：

我也遇到了这个问题并找到了这个页面，所以我想我会为任何可能这样做的人发布我的解决方案。

我的是模式出现的方式。有人在应该是 .modal('show') 的时候使用了 .toggle() 所以我猜从模态的角度来看它从来没有正确出现过所以它也不会消失。

希望对生活在未来的人有所帮助。

【讨论】：

【解决方案11】：

在我的情况下，我有其他 div。
我已经用 z-index 解决了。

.modal button.close {
    z-index: 1000;
}

【讨论】：

【解决方案12】：

我有同样的问题。我解决了在我写这段代码的地方添加“events.js”的问题：

$("button[data-dismiss=modal]").click(function()
{
  $(".modal").modal('hide');
});

通过在页面的每个头部添加此代码，您将能够通过本机按钮关闭模式。我希望这个解决方案可以对某人有所帮助

【讨论】：

增加这个，因为这对于放入主 JS 文件更有用，而不必添加任何其他建议来分隔 html 文件。

【解决方案13】：

对我来说，模式没有关闭，因为脚本文件有冲突，所以使用最低要求的脚本文件来检查关闭模型中的问题。我添加了正确关闭模型的脚本

"scripts": [
          "src/assets/js/lib/jquery/jquery.min.js",
          "src/assets/js/lib/bootstrap/js/popper.min.js",
          "src/assets/js/lib/bootstrap/js/bootstrap.min.js"
        ]

当然，我已经在样式中添加了 bootstrap.min.css。

【讨论】：

【解决方案14】：

在我的情况下，我在调用模式的链接上缺少data-target 属性。

<a href="#getResults"
   class="results-link"
   data-toggle="modal"
   data-target="#results-modal"
   data-providerName="${providerName}"
   data-individualID="${individualID}"
   data-reportID="@Model.ReportID">Results
</a>

【讨论】：

【解决方案15】：

没有一个答案对我有帮助。但我也遇到了问题。

我忘记添加 Bootstrap 的 JavaScript 文件了。我添加的只是 Bootstrap 的 CSS。 Bootstrap CSS 和 JS CDN 链接都需要添加到页面中。

因此，请确保添加此 Bootstrap CDN 以添加脚本：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

【讨论】：

【解决方案16】：

如果您将代码放入您的代码中（在某些情况下是有意义的）：

$modal.off('click')

那么它也会导致模态不会因为事件被阻止而关闭。您可以通过按 Esc 来测试它是否可以关闭模式。它可以工作，然后您的点击事件被阻止。

你可以像这样调试它，你会看到它返回 false：

$modal.on('click',function(event){
    console.log('debug click');
    console.log(event);
});

在这种情况下，您必须自己处理：

$modal
  .on('click', '[data-dismiss="modal"]', function() {
      $modal.modal('hide');
  });

【讨论】：

【解决方案17】：

   const backdrops = document.querySelectorAll('.modal-backdrop.fade.show');
          Array.prototype.forEach.call(backdrops, function (node) {
            node.parentNode.removeChild(node);
          });
          $(`#${data.uniqueId}`).modal('hide');
          $(`#${data.uniqueId}`).parent().removeClass("open");

body {
  padding-right: 0 !important;
  overflow: auto !important;
}

【讨论】：

请详细说明您的解决方案的作用。

【解决方案18】：

使用此代码关闭模型

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click on button</h2>
<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

【讨论】：