Question

我这里有两个用于关闭模态的按钮。第一个是关闭图标，另一个是取消按钮，都使用数据关闭来关闭模态。但是，它们都不起作用。我使用相同的代码为另一个模态，他们工作正常。任何猜测？

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

Answer 1

非常古老的主题，但它仍然首先出现在搜索此问题的人身上，可能是由于他们犯了同样的错误而导致我无法确保模态div不在主体div之外。要使用Material Kit作为示例，您应该仔细检查目标＆＃34; #myModal＆＃34; 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 -->

Answer 2

首先检查你的html中是否包含了bootstrap.js文件。

您可以尝试使用此代码并使用 -

替换关闭模式的按钮标记

user@ubuntu_router:~$ cat output.txt
/usr/bin:/bin
user@ubuntu_router:~$ echo $PATH
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games

如果仍然无效..请告诉我。！

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

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

Answer 3

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

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

关闭

Answer 4

删除“淡入淡出”类。

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

Answer 5

以下是我可以用于比较的模式的实现，以帮助解决模态代码中存在的错误。

var comments = {  
  "comment1":{  
    "text":"this is first comment"
  },
  "comment2":{  
    "text":"this is 2nd comment"
  },
  "comment3":{  
    "text":"this is third comment"
  }
};

console.log(Object.keys(comments));

Answer 6

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

我是模态出现的方式。有人使用.toggle（）当它应该是.modal（'show'）时，所以我认为从模态的角度来看，它永远不会正确出现，因此也不会消失。

希望对将来的人有帮助。

Answer 7

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

Answer 8

就我而言，我还有另一个div。
我用z-index解决了。

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

Answer 9

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

Answer 10

对我来说，模态没有被关闭是因为脚本文件有些冲突，所以使用了最少的脚本文件来检查关闭模型的问题。为什么我添加了正确关闭模型的脚本

"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 样式。

Answer 11

为模型的“关闭”按钮提供ID“ modalClose” 和ID“ myView”添加到您的模型，

然后使用以下代码：

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

</script>

它将像魅力一样工作。

Answer 12

就我而言，我在调用模式的链接上缺少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>

Answer 13

当我在代码中注释此行时，就会发生此问题：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

而我只是将其更改为：

<button type="button" class="btn btn-info btn-lg" style="display: none" data-toggle="modal" data-target="#myModal">Open Modal</button>

成功了

Answer 14

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

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

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

Answer 15

使用此代码关闭模型

＆＃13;

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

＆＃13;

Bootstrap关闭模式不起作用

15 个答案: