logo标签列表

Bootstrap关闭模态框不起作用

javascripthtmlmodal-dialogbootstrap-modal
64

我这里有两个按钮，用于关闭弹窗。第一个是关闭图标，另一个是取消按钮，都使用"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 的显示和隐藏类/方法可能会导致一些问题。 - BSMP
这个线程很旧，但每当我遇到这个问题时，只需要给 “X” 按钮设置 z-index 属性即可。 - sani
25个回答
153

我也曾陷入了这个问题。我不知道为什么，但当我在关闭按钮的类中使用data-bs-dismiss而不是data-dismiss时，它对我起作用了。

data-dismiss适用于Bootstrap 4.x版本，而data-bs-dismiss适用于Bootstrap 5.x版本。

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

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
2
我认为你想粘贴一些代码而不仅仅是单词 Close :) - Zac Anger
12
这对我很有效！按钮的代码应该是：<button id='closeModal' type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>。 - Zexelon
8
谢谢...我忘了，BS5需要使用'bs-'前缀。 - mitcheljh
1
谢谢，对我很有效。 - Shahram Banazadeh
1
至少对我来说，data-dismiss在Bootstrap 4中有效，但在Bootstrap 5中无效。将其更改为Bootstrap 5的data-bs-dismiss就解决了问题。 - John81
显示剩余3条评论
85

移除“fade”类。

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

变成

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

Fade是一种效果，如果您取消了这个效果，您的模态框将不会有淡入淡出的效果。导致这个问题的几个原因之一是没有使用正确的方法调用模态框。

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

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

4
就是这样了！经过数小时的HTML和jQuery调整，最终发现是这个类引起了问题！ - IcedQuick
4
这个方法对我也起作用了，但我不明白为什么在 div 中加入 fade 类就不起作用了。 fade 只是提供了一个过渡效果，对吧？ - Samarth Saxena
这就是问题所在！我使用了错误的方法调用了show函数。 - achecopar
25

虽然这是一个非常古老的话题，但对于那些搜索这个问题的人来说，它仍然排名第一。可能是因为他们犯了我犯过的同样简单的错误，即没有确保模态框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”<containerPage.html>和“menus2.html”，并且在每个“containerPage.html”页面的顶部包含“menus1.html”，在页面底部包含“menus2.html”，因此所有菜单/下拉菜单、页面标题都只包含在两个menus1/2页面中，使得网站管理变得更加容易——直到我遇到像上面提到的模态框问题。 - rolinger
我尝试了几种不同的方法来做你想要的事情，但是很遗憾我没有成功。不过我并不是专家，所以我的失败可能不能说明这件事情做不到。 - Dave Dold
是啊，我也没什么运气。 我应用了自定义 z-index 到实际的模态框，使它比使整个页面变灰的 z-index 更大 - 但没有起作用。 - rolinger
21

Bootstrap 5问题摘要

大家好。像其他人一样，我也被这个问题绊住了。这个帖子已经跨越了很长一段时间，肯定还有其他原因导致该问题。然而，正如Alexandre Elshobokshy无意中提到的那样，更改

data-bs-dismiss

代替

data-dismiss

工作正常。我想强调这一点，因为它是正确的，但是Modal需要更新其他键以使其与Bootstrap和HTML 5配合使用。

HTML5已更改了Bootstrap所需的标签。其中之一是data-bs-dismiss。

其他的是:

data-bs-toggle & data-bs-target

我希望这能帮助其他人!

13

首先检查您是否已正确地在HTML中包含了bootstrap.js文件。

您可以尝试使用以下代码，并将关闭模态框的按钮标签替换为 - 

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

如果仍然无法正常工作，请告诉我！

你可以在jQuery中为关闭按钮添加一个"on-click"事件。像这样：

$("#yourModal").modal("hide");
1
没起作用。我在同一个HTML文件的另一个模态框中使用了同样的两个按钮，它们很好用，所以肯定已经包括进来了。我只是想知道这是否与我的模态框定义有关。 - NoorUllah
现在你可以使用JavaScript来关闭模态窗口。 - Yashwardhan Pauranik
1
我当然可以。但使用这种方法的整个重点是不使用诸如监听器之类的js代码。 - NoorUllah
1
不知道为什么，但当我使用.modal("show")打开我的模态框时， data-dismiss="modal"无法关闭模态框，因此我不得不使用$("#mymodal .close").click(function(){$("#mymodal").hide();});。 - Fanky
8

在我的情况下有用的是，我将data-dismiss替换为data-bs-dismiss，现在它可以工作了！

4
给模态框的关闭按钮赋予 ID“modalClose”，给您的模态框赋予 ID“myView”，然后使用以下代码：
    <script>
    $(function () {
        $('#modalClose').on('click', function () {
            $('#myView').hide();
        })
    })

</script>

它会像魔法一样工作。
2
最好使用 modal('hide') 而不是 hide()。 - Manuel
3

这是我实现的一个模态框，可以用于比较，并帮助排除模态框代码中存在的错误。

<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 type="button" class="btn btn-default" data-dismiss="modal">关闭</button> - Mr. HK
如果仍然无法正常工作，请使用以下代码：$('button[data-dismiss="modal"]').click(function(){ $(this).parent().parent().parent().parent().modal('hide'); }) - DhirendraBisht
我注意到了点赞，但是我没有注意到其他代码是否有效，不过包含的CSS和JS文件解决了我的问题，因为我缺少了jQuery文件。 - echology
@echology请给这个答案点赞，以便这个答案能够帮助到其他人。 - Mr. HK
@Mr.HK 我已经点赞了。如果你早些注意到，计数器是-1，在我的点赞后现在是0。我想这比-1好吧 :-) - echology
@echology 是的，我没有注意到，谢谢 :-) - Mr. HK
3
在我的情况下，我有其他的div在其上面。我用z-index解决了这个问题。
.modal button.close {
    z-index: 1000;
}
2

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接