如何检查引导模式是不是打开，以便我可以使用 jquery 验证？

Posted 2023-05-08

【中文标题】如何检查引导模式是不是打开，以便我可以使用 jquery 验证？

【英文标题】：How to check if bootstrap modal is open, so I can use jquery validate?如何检查引导模式是否打开，以便我可以使用 jquery 验证？

【发布时间】：2013-10-30 15:53:55

【问题描述】：

仅当模式打开时我才需要进行验证，因为如果我打开它，然后我关闭它，并且我按下打开模式的按钮它不起作用，因为它正在进行 jquery 验证，但由于模式已关闭而未显示。

所以我想在模态打开时添加一个 jquery 以便我进行验证，这可能吗？

<script>
$(document).ready(function()

var validator =$('#form1').validate(
 
  ignore: "",
  rules: 

usu_login: 
  required: true
,
usu_password: 
  required: true
,
usu_email: 
  required: true
,
usu_nombre1: 
  required: true
,
usu_apellido1: 
  required: true
,
usu_fecha_nac: 
  required: true
,
usu_cedula: 
  required: true
,
usu_telefono1: 
  required: true
,
rol_id: 
  required: true
,
dependencia_id: 
  required: true
,
  ,

  highlight: function(element) 
$(element).closest('.grupo').addClass('has-error');
        if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0)
        
            $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
            
                var id = $(tab).attr("id");
        
                $('a[href="#' + id + '"]').tab('show');
            );
        
  ,
  unhighlight: function(element) 
$(element).closest('.grupo').removeClass('has-error');
  
 );

); // end document.ready

</script>

【参考方案1】：

为了避免@GregPettit 提到的竞争条件，可以使用：

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

// or, with the optional chaining operator (?.)
$("element").data('bs.modal')?._isShown    // Bootstrap 4
$("element").data('bs.modal')?.isShown     // Bootstrap <= 3

如Twitter Bootstrap Modal - IsShown 中所述。

当模态尚未打开时，.data('bs.modal') 返回undefined，因此|| - 这将使isShown 成为（假）值undefined。如果您很严格，可以这样做($("element").data('bs.modal') || isShown: false).isShown

【讨论】：

这里有个问题，如果modal没有打开，你会从$("element").data('bs.modal')得到'undefined'

._isShown 为我工作，我使用的是 bootstrap 4 alpha

在 Bootstrap 4 中，它是 _isShown，而不是 isShown。

我只是在检查 modal 是否有“显示”类（引导程序 4）——按我的需要工作。在某些方面检查 _isShown 是否更好？

你能在打字稿中分享解决方案吗？

【参考方案2】：

你可以使用

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

Bootstrap 在模式打开时添加 in 类，并在关闭时将其删除

【讨论】：

这对于淡入淡出选项和快速点击或通过 Ajax 调用触发模式有点脆弱。淡入淡出的时间延迟会产生竞争条件。尽管如此，当内容是静态的并且模型仅在用户交互期间弹出时，这是一种有用的方法！

在 Bootstrap 模态中避免竞争条件的最安全、最可靠的方法是订阅其 shown.bs.modal 或 hidden.bs.modal 事件。这样，当您的事件代码获得控制权时，您就可以确定对话框没有处于敏感状态。

在 Bootstrap 版本 4 中有效吗？

@MahdiAlkhatib 不，这在 Bootstrap 4 中不起作用。对于 Bootstrap 4，您可以将 'in' 替换为 'show'。

@PhilipStratford 节目也无法正常工作。参见示例： alert('before: '+$('#imagegalleryOneModal').hasClass('show')); $('#imagegalleryOneModal').modal('show'); alert('after: '+$('#imagegalleryOneModal').hasClass('show'));在 bootstrap-4 之前和之后的案例中，我都得到了“错误”的回应。有什么建议吗？谢谢。

【参考方案3】：

你也可以直接使用jQuery。

$('#myModal').is(':visible');

【讨论】：

就像答案很简单。如果使用 ajax，我在 onbefore 中使用它并检查并返回 false，这样也可以防止对服务器的多次调用。谢谢！

接受的答案返回 undefined 或 null。这完美无缺。谢谢！

【参考方案4】：

Bootstrap 2 , 3 检查页面中是否打开了任何模式：

if($('.modal.in').length)

兼容版本Bootstrap 2、3、4+

if($('.modal.in, .modal.show').length)

仅Bootstrap 4+

if($('.modal.show').length)

【讨论】：

我正在使用 Bootstrap 4.1.3，它添加了 show 类而不是 in。

【参考方案5】：

检查模态是否打开

$('.modal:visible').length && $('body').hasClass('modal-open')

附加事件监听器

$(document).on('show.bs.modal', '.modal', function () 
    // run your validation... ( or shown.bs.modal )
);

【讨论】：

非常感谢，我用它创建了一个优化功能，可以关闭所有打开的模态。 $(".modal:visible").modal("hide");

【参考方案6】：

你也可以使用

$('#myModal').hasClass('show');

【参考方案7】：

$("element").data('bs.modal').isShown

如果之前没有显示模态框，则不会工作。您将需要添加一个额外的条件：

$("element").data('bs.modal')

所以考虑到第一次出现的答案：

if ($("element").data('bs.modal') && $("element").data('bs.modal').isShown)
... 

【参考方案8】：

当它可以用简单的 jQuery 完成时，为什么要把事情复杂化。

$('#myModal').on('shown.bs.modal', function (e) 
    console.log('myModal is shown');
    // Your actual function here
)

【参考方案9】：

在 bootstrap-modal.js v2.2.0 上：

( $('element').data('modal') || ).isShown

【讨论】：

答案测试，accepted answer的原始学分

为什么这被否决了？这正是我所需要的

【参考方案10】：

作为一种解决方法，我个人使用自定义全局标志来确定模式是否已打开，然后我将其重置为 'hidden.bs.modal'

【参考方案11】：

通过 ID 检查任何特定模型状态的 javascript 方法。

modalstate = document.getElementById('modal-id').classList.contains('show')

如果特定的 modal-id 是打开的，这将返回 true。

【参考方案12】：

此代码指示，当模态打开（在正文中）或关闭（结果为假）时

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

【讨论】：

我，在屏幕中插入凭据时使用，（用于模式）和页面刷新 2 分钟，并且，刷新或不刷新，删除所有层而不是登录时间...和 serch ，并构建解决方案，......这么久的朋友