我可以检查是否显示/隐藏了引导程序模式吗？

71

我可以检查Bootstrap Modal当前是否以编程方式显示/隐藏？

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

我需要对/错

— 用户名
source

jQuery if语句的

— Phil

136

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

如果模式打开则返回true

— Pehlaj-移动应用程序开发人员
source

2

if（$（'＃myModal'）。hasClass（'in'））{/ *做某事* /}是最佳用法。谢谢

— MERTDOĞAN2014年

22

对我而言$('#myModal').hasClass('show')，Bootstrap V4

— Reza Afzalan

@Samad它不适用于Bootstrap 4，但是适用于3。reza的答案适用于4，它不适用于3 ...

— estani

1

@estani尝试if($('.modal.in, .modal.show').length)使用Bootstrap

29

最好的方法在文档中给出

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

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

— 搏动法
source

当然，这是模态出现时执行函数的最佳方法，但不同于OP所要求的，它不同于检查其当前是否显示或隐藏。例如，我的用例是在按键上执行操作，但前提是必须看到某种特定的模态。我不知道如何使用该方法。

— DHW

@DHW您不能跟踪这些方法是打开还是关闭？如果显示->存储显示，则隐藏->存储显示。然后，您可以仅引用相关变量。

— 花药

22

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

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

— ctf0
source

1

这听起来很不错。也不依赖于可能会变得脆弱的特定类选择器。

— Mike Rapadas 2015年

4

但是，我相信，如果在显示/隐藏动画期间执行它，则可能会返回假阳性。

— Dinei 2015年

也许但即使函数等待动画完成以检查其可见还是隐藏，因为该动画的工作方式与使用常规CSS相同。

— ctf0

7

什么时候模态隐藏？我们这样检查：

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

— 卡姆列什
source

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')

— 埃斯塔尼
source

3

使用hasClass('in')。如果在modal中，它将返回trueOPEN状态。

例如：

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

— Pehlaj-移动应用程序开发人员
source

3

以官方方式：

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

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

— 酒田银时
source

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

— kiw

2

使用Bootstrap 4：

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

— NaturalBornCamper
source

2

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

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

— 皮卡曼德2
source

1

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

— 杰基山
source

1

对我来说这有效

 
if（$（“ #myModal”）。css（“ display”）！= 'none' && $（“ #myModal”）. css（“ visibility”）！= 'hidden'）

alert("modal shown");

— 莫妮卡·奇富恩特斯
source

0

我尝试这样的功能，然后在需要时调用this函数。已经为我工作。

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

— Adhitya
source