如何检查 bootstrap-4 模态是不是已经打开？
Posted
技术标签:
【中文标题】如何检查 bootstrap-4 模态是不是已经打开？【英文标题】：how to check if bootstrap-4 modal already open?如何检查 bootstrap-4 模态是否已经打开？ 【发布时间】：2018-04-10 10:03:41 【问题描述】：我想检查某个模态是否已经打开，我已经尝试过这种方法（bootstrap-4）但对我不起作用（即使对话框打开也总是给出'false'）
$('#myModal').is(':visible');
$('#myModal').data('bs.modal').isShown ;
$('#myModal').hasClass('in');
我检查了模态类列表，在我的模态显示在屏幕上之后没有任何新类添加到我的模态中
我不想要事件处理程序，因为我不想跟踪状态，我只想检查对话框之前是否通过其他功能打开过
【问题讨论】：
【参考方案1】：当引导模式 (v4) 显示时，据我所知，在 DOM 中发生了三件事，模式有两个名为 fade 的类> 和 show，以及一个带有 display 到 block 的样式属性（以及其他类似 padding... ) 并且 body 标签获得一个名为 modal-open 的类。所以实际上你所要做的就是检查其中一件事情，我建议检查 show 类的现有情况。
$('#exampleModal').hasClass('show'); // return true if the modal is open
或
$('body').hasClass('modal-open');
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Bootstrap modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#myModal').modal('show');
setTimeout(function()
var isShown = $('#myModal').hasClass('show');
console.log(isShown);
, 1000);
</script>
</body>
</html>【讨论】：
对话框第一次启动时没有添加任何额外的类 setTimeout working (Y) ，但是是否有另一种解决方案不依赖于这个超时值（即：1000ms） @Sara 我认为这可能取决于脚本的执行方式/时间。 请详细说明 它是来自引导示例的标准模式代码，没有任何更改@chebaby【参考方案2】：如果模态已通过 Bootstrap JS 显示，则您的模态将具有 .show 类，因此如果您想查看模态当前是否打开，可以检查 $('#myModal').hasClass('show')。
【讨论】：
对话框打开时也返回 false 检查$('#myModal') 时会得到什么？请告诉我们结果
我检查了 modal classList ，在它对屏幕可见后没有任何新类添加到我的模态
它只返回纯文本
这个纯文本是什么？你自己输入的是$('#myModal')吗？以上是关于如何检查 bootstrap-4 模态是不是已经打开？的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap 4 modal-backdrop 样式（特定模态）