Як перевірити, чи відкритий модальний режим завантаження, тож я можу використовувати перевірку 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 працював на мене, я використовую завантажувальний 4 альфа
Iftikar Urrhman Khan

8
У Bootstrap 4 це _isShown, ні isShown.
elquimista

Я просто перевіряю, чи модальний клас "показав" (bootstrap 4) - працює, як мені потрібно. Чи перевірити _isShown в чомусь краще?
траїноз

Чи можете ви, будь ласка, поділитися рішенням у машинописі?
Сураджит Бісвас

80

Можна використовувати

$('#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');

1
Як, коли відповідь проста. Якщо я використовую ajax, я використовую це в попередньому режимі і перевіряю і повертаю помилкове, таким чином це також запобігає багаторазовим викликам на сервер. Дякую!
eaglei22

Прийнята відповідь повертається невизначеною або недійсною. Це спрацювало бездоганно. Дякую!
Олексій

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){
... 
}



0

Навіщо ускладнювати речі, коли це можна зробити за допомогою простого jQuery, як описано нижче.

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.