Как проверить, открыто ли модальное окно начальной загрузки, поэтому я могу использовать проверку jquery

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>
Мариана Эрнандес
источник

Ответы:

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(ложное) значение undefined. Если вы придерживаетесь строгости, можно сделать($("element").data('bs.modal') || {isShown: false}).isShown

Брайан М. Хант
источник
2
В этом есть проблема: если модальное окно не открыто, вы получите 'undefined' из $ ("element"). Data ('bs.modal')
Flezcano
._isShown у меня сработал, я использую bootstrap 4 alpha
Ифтикар Уррман Хан
8
В Bootstrap 4 это _isShownне так isShown.
elquimista
Я просто проверяю, есть ли в модальном классе «показанный» (bootstrap 4) - работает так, как мне нужно. В чем-то лучше проверка _isShown?
trainoasis
Не могли бы вы поделиться решением в машинописном тексте?
Сураджит Бисвас 01
81

Ты можешь использовать

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

Bootstrap добавляет inкласс, когда модальное окно открыто, и удаляет его при закрытии

тлиф
источник
4
Это оказывается немного хрупким с опцией затухания и быстрыми щелчками или запуском модального окна через вызов Ajax. Задержка по времени затухания может создать условия гонки. Тем не менее, это полезный способ подключиться к нему, когда содержимое статично, а модель появляется только во время взаимодействия с пользователем!
Грег Петтит
Самый безопасный и верный способ избежать состояния гонки в модальном окне Bootstrap - это подписаться на его события shown.bs.modalили hidden.bs.modal. Таким образом, когда ваш код события получает управление, вы абсолютно уверены, что диалог не находится в чувствительном состоянии.
Эрик Ллойд,
Действительно ли это в Bootstrap версии 4?
Махди Алхатиб
1
@MahdiAlkhatib Нет, это не работает в Bootstrap 4. Вы можете заменить 'in'с 'show'на Bootstrap 4.
Филипп Stratford
61

Вы также можете напрямую использовать jQuery.

$('#myModal').is(':visible');
alexoviedo999
источник
1
Нравится, когда ответ прост. Если я использую ajax, я использую это в onbefore и проверяю и возвращаю false, таким образом, это также предотвращает множественные вызовы на сервер. Спасибо!
eaglei22 02
Принятый ответ вернул undefined или null. Это работало безупречно. Спасибо!
Алекс
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 Проверьте, открыт ли на странице любой модальный элемент:

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и он добавляет showкласс вместо in.
Ариф Хуссейн
4
$("element").data('bs.modal').isShown

не будет работать, если модальное окно не было показано ранее. Вам нужно будет добавить дополнительное условие:

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

итак ответ с учетом первого появления:

if ($("element").data('bs.modal') && $("element").data('bs.modal').isShown){
... 
}
Joanfihu
источник
3

Вы также можете использовать

$('#myModal').hasClass('show');
Бхавеш Лалвани
источник
0

В bootstrap-modal.js v2.2.0:

( $('element').data('modal') || {}).isShown
Рикардо
источник
Ответ проверен, оригинальные кредиты принятому ответу
Рикардо
2
Почему это отклонено? Это было именно то, что мне было нужно
Рэйчел Эдж
0

Зачем все усложнять, если это можно сделать с помощью простого jQuery, как показано ниже.

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})
Сокка Бумеранг
источник