Загрузка модальной после закрытия первой (Bootstrap 3)

Question

У меня есть мода на странице (.lockdown), которая имеет две кнопки закрытия. Один из них (.btn-typoedit) просто закрывает модальный, однако другой (.btn-newcontact) закрывает модальный, а затем сразу открывает другой (#change-contact). Однако, когда этот второй модальный закрывается, вся страница «слегка сдвигается», и я получаю место для второй полосы прокрутки.

Это код Javascript Я использую:

$(document).ready(function() { 
    $('.btn-newcontact').on('click', function() { 
     $('#change-contact').modal('show'); 
    }); 
}); 

И в JSFddle, чтобы увидеть глюк в действии (открыть первую модальность, а затем нажмите кнопку «NEW»): https://jsfiddle.net/z904fzcm/

Просматривая Загрузочная документация, я могу установить событие для запуска на .hidden.bs.modal, но я не совсем уверен, что даже вызывает сбой.

Answer 1

Наблюдая, как код изменен, как модальности открытия/закрытия, мне удалось вывести следующее:

• Как открывается модальным, body получает класс .modal-open и получает CSS padding-right: 17px.
• Когда модальный объект закрывается, вышеуказанный класс и CSS удаляются.
• Поскольку код для закрытия одного модального и открытого другого был в пределах одной и той же декларации .on('click'), класс .modal-open и CSS были удалены, но не были повторно добавлены для второго модального.

Для борьбы с этим я наблюдаю за переменной я назвал changeContact, установленным на 0 на странице загрузки, а затем я изменяю 1 при нажатии соответствующей кнопки.Если эта переменная равна 1 при проверке полезной загрузки Bootstrap hidden.bs.modal, I затем открыть второй способ. Это отделяет код от двух отдельных функций, то есть CSS правильно изменяется.

$(document).ready(function() 
{ 
    var changeContact = 0; 

    $('.btn-lockdown').on('click', function() { 
     changeContact = 0; 
    }); 

    $('.btn-newcontact').on('click', function() { 
     $('.lockdown').modal('hide'); 
     changeContact = 1; 
    }); 

    $('.lockdown').on('hidden.bs.modal', function() { 
     if (changeContact) { 
      $('#change-contact').modal('show'); 
     } 
    }); 
}); 

See it in action on JSFiddle

Answer 2

Добавить переполнение скрытый в теле

$(document).ready(function() { 
    $('.btn-newcontact').on('click', function() { 

    $('#change-contact').modal('show'); 
     $('body').css({'overflow':'hidden'}); 
    }); 
}); 

демо: https://jsfiddle.net/pf9juunm/

более безопасным решением будет использовать класс для переключения состояния:

$(document).ready(function() { 
    $('.btn-newcontact').on('click', function(e) { 
    $('#change-contact').addClass('active'); 
    $('.lockdown').modal('hide'); 
    }); 


    $('.lockdown').on('hidden.bs.modal', function() { 
    if ($('#change-contact.active').length) $('#change-contact').modal('show'); 
    $('#change-contact').removeClass('active'); 
    }); 
}); 

https://jsfiddle.net/pf9juunm/1/

Answer 3

Это может быть сбой от Bootstrap modal.

В обходные может быть удаление анимации путем удаления fade или установить тайм-аут (~ 500мс) перед вызовом .lockdown

Вы также можете сделать это body { padding-right: 0 !important }

демо: https://jsfiddle.net/z904fzcm/1/

Answer 4

Это добавляет заполнение в теле, поэтому оно слегка смещается. Попробуйте удалить это дополнение с помощью jQuery.

Вы можете попробовать removeAttr, чтобы удалить атрибут стиля из тела.

$('body').removeAttr('style');