如何检查引导模态是否打开,所以我可以使用jQuery validate


111

我只需要在模式打开的情况下进行验证,因为如果我打开它,然后将其关闭,然后我按打开模式的按钮就行不通了,因为它正在进行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>

Answers:


183

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

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

Twitter Bootstrap Modal-IsShown中所述

当模态尚未打开时,.data('bs.modal')返回undefined,因此|| {}-将使isShown(falsy)值undefined。如果你严格的话,一个人可以做($("element").data('bs.modal') || {isShown: false}).isShown


2
这样做有一个问题,如果模式未打开,您将从$(“ element”)。data('bs.modal')
Flezcano

._isShown为我工作,我使用的是bootstrap 4 alpha
Iftikar Urrhman Khan

8
在Bootstrap 4中_isShown,不是isShown
elquimista

我只是在检查模态是否具有“显示”类(引导程序4)-根据需要工作。在某种程度上检查_isShown是否更好?
trainoasis

能否请您分享打字稿中的解决方案?
Surajit Biswas '18 -10-1

80

您可以使用

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

Bootstrap in在模式打开时添加类,在模式关闭时删除类


4
事实证明,使用衰落选项和快速单击或通过Ajax调用触发模态会有些脆弱。淡入淡出的时间延迟可能会产生竞争条件。仍然是一种有用的方法,当内容是静态的并且仅在用户交互期间弹出模型时,才可以挂接到它!
格雷格·佩蒂特

避免在Bootstrap模态上发生竞争状况的最安全,最可靠的方法是订阅其shown.bs.modalhidden.bs.modal事件。这样,当您的事件代码得到控制时,您便可以确定对话框未处于敏感状态。
埃里克·劳埃德

在Bootstrap版本4中有效吗?
Mahdi Alkhatib

1
@MahdiAlkhatib不,这并不在引导4.工作你可以替换'in''show'自举4
菲利普·斯特拉特福德

61

您也可以直接使用jQuery。

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

1
就像答案很简单一样。如果使用ajax,则在onbefore中使用它并检查并返回false,这样也可以防止多次调用服务器。谢谢!
eaglei22

接受的答案返回undefined或null。这完美地工作了。谢谢!
Alex

8

检查模态是否打开

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

附加事件监听器

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

6

Bootstrap 2、3 Check是否在页面中打开任何模式:

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

兼容版本Bootstrap 2、3、4+

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

只有Bootstrap 4+

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

3
我正在使用Bootstrap 4.1.3,它添加了showclass而不是in
阿里夫·侯赛因

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

如果之前未显示过模态,将无法正常工作。您将需要添加一个附加条件:

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

因此,考虑到首次出现的答案:

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



0

如果可以通过简单的jQuery完成以下操作,为什么要使事情复杂化。

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.