我可以检查引导模式是否显示/隐藏？答案

【问题标题】：Can I check if Bootstrap Modal Shown / Hidden?我可以检查引导模式是否显示/隐藏？
【发布时间】：2013-11-09 13:56:23
【问题描述】：

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

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

我需要真/假

【问题讨论】：

jQuery if statement to check visibility的可能重复

标签： javascript twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

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

模态打开时返回true

【讨论】：

if($('#myModal').hasClass('in')){/*do something*/} 最佳用法。谢谢
对我来说 $('#myModal').hasClass('show') 有效，Bootstrap V4
@Samad 它不适用于 Bootstrap 4，但它适用于 3。 reza 的答案适用于 4，不适用于 3...
@estani 尝试使用 if($('.modal.in, .modal.show').length) 获取 Bootstrap V2、3、4+

【解决方案2】：

文档中给出了最好的方法

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

更多信息请参考http://getbootstrap.com/javascript/#modals

【讨论】：

当然，这是在模态出现时执行函数的最佳方法，但这不同于检查它当前是显示还是隐藏，正如 OP 所要求的那样。例如，我的用例是在按键上执行操作，但前提是某种模式是可见的。我不明白如何使用这种方法。
@DHW 你不能用这些方法跟踪它是打开还是关闭？如果显示 -> 存储它显示，当隐藏时 -> 存储它是隐藏的。然后你就可以引用相关的变量了。

【解决方案3】：

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

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

【讨论】：

这读起来真好。也不依赖于可能被证明是脆弱的特定类选择器。
但是，我相信如果在显示/隐藏动画期间执行它可能会返回误报。
也许可以，但即使该函数等到动画完成以检查其是否可见或隐藏，因为这与使用普通 css 的工作方式相同。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

所有 Bootstrap 版本：

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

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

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

更多信息

Bootstrap 3 及之前的版本

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

引导程序 4

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

【讨论】：

【解决方案6】：

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

例如：

if($('.modal').hasClass('in')){
   //Do something here
}

【讨论】：

【解决方案7】：

官方方式：

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

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

【讨论】：

这就是我所追求的，它已经在模式打开时返回 true，但在应用 shown 类之前

【解决方案8】：

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

$('.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;
}

【讨论】：

【解决方案9】：

使用 Bootstrap 4：

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

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

对我来说这是可行的

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

alert("modal shown");

【讨论】：

【解决方案12】：

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

function modal_fix() {
var a = $(".modal"),
    b = $("body");
a.on("shown.bs.modal", function () {
    b.hasClass("modal-open") || b.addClass("modal-open");
});
}

【讨论】：

【解决方案13】：

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

var truFalse = $('body').hasClass('modal-open');

【讨论】：