如何检查bootstrap模式是否打开,所以我可以使用jquery验证

Question

我需要在模态打开时进行验证,因为如果我打开它,然后我关闭它,并且我按下打开模态的按钮它不起作用,因为它正在进行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>

Answer 1

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

($("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

Answer 2

您可以使用

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

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

Answer 3

您也可以直接使用jQuery.

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

Answer 4

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

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

兼容版本Bootstrap 2、3、4+

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

只有引导程序 4+

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

Answer 5

您还可以使用

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

Answer 6

检查模态是否打开

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

附加事件监听器

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

Answer 7

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

如果以前没有显示模态,则无效.您需要添加额外条件:

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

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

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