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

Posted 2023-02-22

【中文标题】我可以检查引导模式是不是显示/隐藏？

【英文标题】：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的可能重复

【参考方案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');