128

只有在模式打开时我才需要进行验证，因为如果我打开它，然后我关闭它，然后我按下打开模式的按钮它不起作用，因为它正在进行 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>
4

12 回答 12

212

为了避免@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

于 2014-01-24T20:09:09.353 回答
89

您可以使用

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

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

于 2013-10-22T00:01:07.247 回答
81

您也可以直接使用 jQuery。

$('#myModal').is(':visible');
于 2014-10-08T14:09:33.793 回答
14

Bootstrap 2 , 3 Check is any modal open in page :

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

兼容版本Bootstrap 2 , 3 , 4+

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

只有Bootstrap 4+

if($('.modal.show').length)
于 2019-03-04T11:49:39.887 回答
12

检查模态是否打开

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

附加事件侦听器

$(document).on('show.bs.modal', '.modal', function () {
    // run your validation... ( or shown.bs.modal )
});
于 2018-04-23T08:15:41.110 回答
6

你也可以使用

$('#myModal').hasClass('show');
于 2019-11-13T06:16:48.780 回答
4 
$("element").data('bs.modal').isShown

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

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

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

if ($("element").data('bs.modal') && $("element").data('bs.modal').isShown){
... 
}
于 2015-04-21T10:27:14.567 回答
1

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

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})
于 2020-04-13T08:12:34.807 回答
0

在 bootstrap-modal.js v2.2.0 上：

( $('element').data('modal') || {}).isShown
于 2017-06-12T18:19:10.303 回答
0

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

于 2020-10-28T15:44:00.130 回答
0

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

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

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

于 2021-11-07T14:12:58.247 回答
0

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

var trueFalse = ($('body').hasClass('modal-open'));
于 2021-12-14T21:37:25.263 回答