A_SweetCherry
@A_SweetCherry

Как в Bootstrap3 сделать вызов из модального окна другое модальное окно?

Например есть кнопка "описание"
<a href="#description-training" data-toggle="modal">описание</a>

по клику на эту кнопку всплывает бутсраповское модальное окно с описание. В нем же есть еще одна кнопка, например "заказать звонок"
<a href="#modalOrderCall" data-toggle="modal" data-dismiss="modal" >Заказать звонок</a>

которая по клику должна закрыть это окно и запустить другое. Для закрытия текущего я использую атрибут data-dismiss="modal".
И вроде бы все работает, но, после открытия второго окна убирается класс "modal-open", который вешается на body, добавляя стиль overflow:hidden, и тем самым не давая сайту скроллироваться.

В общем после открытия второго окна из первого появляется возможность скролировать сайт, что не круто. Есть способы борьбы с этим?
  • Вопрос задан
  • 5271 просмотр
Решения вопроса 1
Попробуйте открывать второе окно не сразу, а по таймауту. Можно даже использовать нулевой таймаут.
/* close modal */
setTimeout(function() {/* open modal */}, 0)
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
A_SweetCherry
@A_SweetCherry Автор вопроса
Пришлось на клик вешать вот такой код
('#getModal').click(function(){
        $('#description-training').modal('hide');
        setTimeout(function() {$('#modalOrderCall').modal('show');}, 500)
        return false;
    })

то есть по сути закрыть одно и потом открыть второе.
Ответ написан
A_SweetCherry
@A_SweetCherry Автор вопроса
Но если честно, то мне не очень нравится эффект дергания. Так как при открытии сначала обрезается экран и появляется затемняющий фон, потом экран снова встает на место и исчезает фон, и потом опять появляется, какой-то такой дерганный эффект.

А чем стоит пользоваться для реализации такой задачи?
Вот идеально, как я себе это представляю, это что бы фон в момент смены окон не пропадал, а просто модальное окно пропадало, например фейдом, и на его место другое вставало.
Ответ написан
@Jamshed
Раз уж проблема в том что у body исчезает класс "modal-open". Можно навесить на событие "shown.bs.modal" (срабатывает после открытия) 2-го модального окна код который будет добавлять в body класс "modal-open":
$('#modal2').on('shown.bs.modal', function (event) {
  $('body').addClass('modal-open');
})
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы