Question

我可以检查当前显示/隐藏的Bootstrap Modal吗？

赞bool a = if("#myModal").shown();？

我需要真/假

Answer 1

alert($('#myModal').hasClass('in'));

如果模态打开，它将返回true

Answer 2

文档中给出了最好的方法

$('#myModal').on('shown.bs.modal', function () {
  // will only come inside after the modal is shown
});

有关详细信息，请参阅http://getbootstrap.com/javascript/#modals

Answer 3

这是一个古老的问题，但不管怎样，这是我用过的东西，因为有人在寻找同样的东西

if (!$('#myModal').is(':visible')) {
    // if modal is not shown/visible then do something
}

Answer 4

当模态隐藏？我们这样检查：

$('.yourmodal').on('hidden.bs.modal', function () {
    // do something here
})

Answer 5

使用Sub clear_all_styles() Dim styT As Style On Error Resume Next For Each styT In ActiveWorkbook.Styles If Not styT.BuiltIn Then If styT.Name <> "1" Then styT.Delete End If Next styT。如果modal处于hasClass('in')状态，它将返回true。

E.g：

OPEN

Answer 6

以正式方式：

> ($("element").data('bs.modal') || {})._isShown    // Bootstrap 4
> ($("element").data('bs.modal') || {}).isShown     // Bootstrap <= 3

{}用于避免模态尚未打开的情况（它返回undefined）。您也可以将其指定为{isShown: false}，以使其更有意义。

Answer 7

下面是一些自定义模式代码，这些代码为模式状态提供了更明确命名的类：

$('.modal').on('show.bs.modal', function(e)
{
    e.currentTarget.classList.add("modal-fading-in");
    e.currentTarget.classList.remove("modal-fading-out");
    e.currentTarget.classList.remove("modal-hidden");
    e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('hide.bs.modal', function(e)
{
    e.currentTarget.classList.add("modal-fading-out");
    e.currentTarget.classList.remove("modal-fading-in");
    e.currentTarget.classList.remove("modal-hidden");
    e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('hidden.bs.modal', function(e)
{
    e.currentTarget.classList.add("modal-hidden");
    e.currentTarget.classList.remove("modal-fading-in");
    e.currentTarget.classList.remove("modal-fading-out");
    e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('shown.bs.modal', function(e)
{
    e.currentTarget.classList.add("modal-visible");
    e.currentTarget.classList.remove("modal-fading-in");
    e.currentTarget.classList.remove("modal-fading-out");
    e.currentTarget.classList.remove("modal-hidden");
});

然后，您可以使用JS和CSS轻松定位模式的各种状态。

JS示例：

if (document.getElementById('myModal').hasClass('modal-fading-in'))
{
    console.log("The modal is currently fading in. Please wait.");
}

CSS示例：

.modal-fading-out, .modal-hidden
{
    opacity: 0.5;
}

Answer 8

if($('.modal').hasClass('in')) {
    alert($('.modal .in').attr('id')); //ID of the opened modal
} else {
    alert("No pop-up opened");
}

Answer 9

使用Bootstrap 4：

if ($('#myModal').hasClass('show')) {
    alert("Modal is visible")
}

Answer 10

所有Bootstrap版本：

var isShown = $('.modal').hasClass('in') || $('.modal').hasClass('show')

要关闭它而不依赖于状态和版本：

$('.modal button.close').click()

我可以检查是否显示/隐藏Bootstrap模式？

12 个答案:

更多信息