75

我可以检查引导模式当前是否以编程方式显示/隐藏？

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

我需要真/假

4

13 回答 13

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

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

于 2013-10-30T05:46:16.760 回答
29

文档中给出了最好的方法

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

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

于 2013-10-30T07:42:16.820 回答
22

这是一个老问题，但无论如何我用了一些东西，以防有人在寻找同样的东西

if (!$('#myModal').is(':visible')) {
    // if modal is not shown/visible then do something
}
于 2015-02-11T12:38:29.590 回答
7

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

$('.yourmodal').on('hidden.bs.modal', function () {
    // do something here
})
于 2015-01-23T05:51:37.163 回答
7

所有 Bootstrap 版本：

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

要独立于状态和版本关闭它：

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

更多信息

引导程序 3 及之前

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

引导程序 4

var isShown = $('.modal').hasClass('show')
于 2019-11-01T16:24:22.467 回答
3

以官方方式：

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

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

于 2018-01-15T04:52:08.837 回答
3

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

$('.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;
}
于 2020-01-16T05:42:56.877 回答
3

使用hasClass('in'). OPEN如果 modal 处于状态，它将返回 true 。

例如：

if($('.modal').hasClass('in')){
   //Do something here
}
于 2017-08-09T10:25:00.173 回答
2

使用引导程序 4：

if ($('#myModal').hasClass('show')) {
    alert("Modal is visible")
}
于 2019-03-10T15:30:15.487 回答
1 
if($('.modal').hasClass('in')) {
    alert($('.modal .in').attr('id')); //ID of the opened modal
} else {
    alert("No pop-up opened");
}
于 2017-08-09T09:48:16.070 回答
1

对我来说这有效

 
if($("#myModal").css("display") !='none' && $("#myModal").css("visibility") != 'hidden')


alert("modal shown");

于 2018-05-25T10:20:35.807 回答
0

我尝试这样使用函数，然后在需要时调用此函数。一直为我工作。

function modal_fix() {
var a = $(".modal"),
    b = $("body");
a.on("shown.bs.modal", function () {
    b.hasClass("modal-open") || b.addClass("modal-open");
});
}
于 2020-12-31T16:31:25.393 回答
0

这解决了您的问题，如果 true 不刷新，并且 false refresh

var truFalse = $('body').hasClass('modal-open');
于 2021-12-14T21:44:12.750 回答